制作行程で生まれた情報の堆積
  • カテゴリー
  • このサイトについて
  • Twitter

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

jQueryMobileブラウザ怪現象2015.1.14

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

 

Copyright © 2025 NEW FORMATION All Rights Reserved.