あるお方からjQuery Mobileを使ったサイトのご相談をいただいたことがきっかけで、jQuery Mobileに興味がわき、自分でもスマートフォンサイトをつくっています。
で、フォームからselectタグで選択するところで、スマートフォン側から見ると一度拡大されてしまい、選択後もそのままズームされた状態になって、ピンチインして縮小しなきゃいけないという面倒くさい問題が発生していました。
なにかやり方が間違っているのかとググってみると、こちらのサイトを発見。
[jQuery Mobile] 1.1.0 RC1公開 | Screw-Axis
みると、この問題らしき内容が1.1で解決したようです。
iOSでデバイスの回転とページのズームに関するバグに悩まされてきましたが、Scott Jehl氏のハックで対応可能になったようです。これを取り込むため、新たに zoom.iosorientationfix.js という身も蓋もない名前のユーティリティを追加。
更に、セレクトボックスやインプット要素がフォーカスを得た際に発生する別のズーム問題を解決するための zoom.iosfocusfix.js も用意されました。
ユーティリティとして $.mobile.zoom が用意され、enable()/disable()メソッドでズーム機能を切り替えることもできるようですが、まだ試せていません。
私がつかっていたjQuery Mobileは、下記のようになっていたので、
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
これを、1.1.0のCDNに変更
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
ちなみに、jQuery MobileのCDNはこちらにあります。
jQuery CDN – provided by (mt) Media Temple
で、自分のiPhoneでフォームした時の拡大の問題が再発するかどうか試したところ、無事に解決していることが確認できました。
ということで、jQuery Mobileもなかなかおもしろいですね。
とりあえず、今月末までに今のサイトをつくりあげなくては！
