iPhone用のウェブを作る時の覚書 widthとinitial-scaleの関係

iPhone用に画面サイズを指定する際、以下のようなメタタグをヘッダに記述します。


＜meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, "＞

この時のinitial-scaleとminimum-scaleの計算方法についてです。


「CSSのみのレスポンシブデザインをすることになったけど、メインのコンテンツのレイアウトを崩せない」など、widthを320pxに出来ない場合があります。

widthが320pxだと1でいいんですが、上記のようないろんな事情でwidthを320の倍数に出来ない場合は計算で正確に出さないと横幅がピッタリそろいません。

以下の式で出せます。


x = 320 / 画面の横幅（widthで指定している値）

書くまでもないほど簡単なことなんですが、一応覚書ということで。

例えば、画面サイズ600pxの場合は・・・

x = 320 / 600
x = 0.53333....

となるので、

＜meta name="viewport" content="width=600, initial-scale=0.5333, user-scalable=yes, maximum-scale=2.0, minimum-scale= 0.5333 , "＞


という風な記述になります。