viewportの設定を行っていても、テキストフォームやセレクトの入力を行うと、iOSでズーム禁止が解除され、画面が拡大できてしまう問題に遭遇しました。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
jQuery Mobileバージョン:1.4.5
jQueryバージョン:2.1
input[type=”text”]のfont-sizeを、自動ズームされない16px以上に設定
デバイス:iPhone 6 Plus + iOS 8.1.2
jQuery Mobileの本家デモサイトもバグっている様子
こちらをiPhoneで見てみると、デフォルトではズーム禁止になっているが、テキストフォームやセレクトの入力をタップすると、拡大可能になってしまいます。
http://demos.jquerymobile.com/1.4.5/forms/#TextinputsTextareas
jQuery Mobileのフォーム関連モジュールを外して対処
結局のところ、jQueryMobileビルドページから、バグってるっぽいモジュールを外したところ、うまくいきました。
jQueryMobileビルドページ:
http://jquerymobile.com/download-builder/
外したモジュール:
(すべてForms欄)
SelectsSelects: Custom menus
Slider
Slidertooltip
Text Inputs & Textareas
Textarea Autosize
Range Slider
Text Input Clear Button
テキストボックスはCSSで整形してやるだけで良いですが、セレクトボックスはボタンのグラフィックの上に、選択値が表示される機能が失われてしまうので、下記のようなセレクトボックスHTMLに対して、Javascriptを追記しました。
<div data-role="fieldcontain"> <label for="select01"></label> <select name="select01" id="select01"> <option value="1">選択肢1</option> <option value="2">選択肢2</option> </select> </div>
//セレクトボックスの表示 $('.ui-field-contain').children('select').wrap(function(){ return '<div class="ui-select"><div class="ui-btn"></div></div>'; }).before(function(){ return '<span>' + $(this).children(':selected').text() + '</span>'; }); $("select").change(function(){ var s = $(this).children(':selected').text(); $(this).prev('span').text(s); });