[html]コンテンツの最適化

以前、webのコンテンツをiOSのデバイスに合わせるというエントリーを書きました。

で、その知識を使ってjQuery Mobileを使ってみたものの、いざ、端末を使って確認するとコンテンツが調整されないではないですか！！

ちなみに、編集前は、こちら

なぜかなーっと思って調査したところ、metaタグの属性が抜けていることがわかりました。

The minimum-scale and maximum-scale properties also affect the behavior when changing orientations. The range of these property values is from >0 to 10.0. The default value for minimum-scale is 0.25 and maximum-scale is 5.0.

via:How Safari Infers the Width, Height, and Initial Scale

というわけで、
最終的に、下記のように落ち着きました。

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">

で、調整後のUIは下の形になりました。