jQueryMobileが生成するinput、selectをクリックすると、iOSでズーム禁止が解除されてしまう

viewportの設定を行っていても、テキストフォームやセレクトの入力を行うと、iOSでズーム禁止が解除され、画面が拡大できてしまう問題に遭遇しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

1	<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>

</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);
});

//セレクトボックスの表示

$('.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);

});