Viewportのinitial-scale=1とwidth=device-widthの関係
Posted: Updated:
width=device-widthとinitial-scale=1を両方書く？
Viewportについて色々調べていたら、initial-scaleとwidthの関係がよくわからなくなってきたので、調べたときの断片をメモ。
<meta name="viewport" content="initial-scale=1.0,width=device-width">
Viewportは，いつもスニペット的に特定のコードを扱っていて，それぞれのプロパティの記述がどのように作用しているのかモヤモヤしてたのです．
以下，主にブラウザベンダーの開発資料を参照しています。
iOS ( Mobile Safari )
You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties. Safari Web Content Guide: Configuring the Viewport
全部のプロパティをいちいち指定する必要はなくて、倍率を1に指定したなら、Safariは勝手にwidthはdevice-width（landscapeならdevice-height）であると仮定して処理するよ、ということらしい。もしもViewportのwidthを980pxとしたまま倍率を宣言したければ、複数書けばよろしいそうで。
Viewportのwidth（window.innerWidth）が初期値980pxであることを考えると、initial-scaleの初期値は0.3266ぐらいってことになりますね。
Android
The default initial scale is calculated to fit the web page in the viewport size. Because the default viewport width is 800 pixels, if the device screen resolution is less than 800 pixels wide, the initial scale is something less than 1.0, by default, in order to fit the 800-pixel-wide page on the screen. Targeting Screens from Web Apps | Android Developers
今度はAndroidさん。デフォルトの初期倍率は、Viewportのwidthはデフォルトで800pxなので、デバイスの解像度が800px未満であれば、倍率はデフォルトで1.0よりも小さくなっているよ、と。ふむふむ
唯一確かなのはデバイスの解像度（というか密度非依存ピクセル）であって、それとViewportのwidth指定によって倍率も変動すると考えられるカンジです。
Opera
さて、viewport の幅、高さ、初期ズーム倍率のどれかが指定された時点で、ブラウザはセットされていない値を自動的に推測します。たとえば、幅に device-width を指定したとき、初期ズーム倍率は自動的に 1 と判断されます。反対に、初期ズーム率を 1 と指定したとき、幅は端末の幅になります。 ですから、推測されない値を利用したい場合以外で、プロパティを複数指定しても特に意味はありません。 viewport メタタグと @viewport 規則 - Dev.Opera
日本語のドキュメントあったのでそのまんまです。書いてあることはどちらかというとMobile Safariと同じノリですね。勝手に推測・仮定しますよ系。
色々モニョモニョ
device-widthが最初に決まっていて，Viewportに指定されたwidthにあわせてinitial-scaleが算出される（device-width/Viewportの指定width = initial-scale）という流れだろうかと勝手に推測．
実際に各ブラウザがどのような処理で判定しているのかはよくわかりませんが，共通して信じてよさそうなのは
initial-scale=1とした時点で，width=device-widthであると暗黙的に決定される．その逆も同様．
ということでしょうか．
現在のviewportの書き方は，デバイス解像度に合わせた可変性を持たせるときに，initial-scale=1とwidth=device-widthを両方書くのが一般的ですが，これらの資料を見る限りだと，どちらか一方の記述だけで実は十分で，両方書くのは過分なのかもしません．
initial-scaleプロパティを1にするのは，iOS系の挙動へのカウンター効果もあるので，widthプロパティより重要だと思ってますが．widthプロパティについては，変な挙動するAndroid系への安全装置（念のため明示）とみた方が良いのかな？
うーん，どこかに確かな情報ありませんかね...jQuery MobileのViewport周りのログでも漁りにいけば何か分かるかしら．
検証不足ですが手元のiPad2(iOS5)・iPhone3GS(iOS4)・F-12C・SO-03Cは，inital-scale=1.0のみでokでした．（たぶん）
