viewport設定メモおよび「width=device-width, initial-scale=1」とは何か

これはmetaタグのviewportの設定に関するメモである。ビューポートの設定は癖があり思い通りにならないので、検証した結果を記載しておく。

モバイルブラウザでのみ有効

viewportの設定はスマートフォンなどモバイル版のブラウザでのみ有効となり、PCブラウザでは無視される。

これは長らくドットバイドット表示でウィンドウサイズも可変であったPCに対し、高解像度モニタとズームを用いるスマートフォンでの表示を想定した機能であるため。

ただしこれらは歴史的経緯のためタブレットや2in1PC、および4Kモニタの存在など、今後どうなるかは定かではない。

スマートフォンは5インチ幅に1000ピクセル以上などの大きな画素数を持っている。このサイズ感でPCモニタと同じように等倍表示すると、コンテンツが非常に小さく表示されてしまう。

そこで実際の解像度とは別に仮想解像度を設定して、あたかもそのサイズであるかのように調整して描画する。このサイズがビューポートである。

例を挙げると、幅100pxの画像を表示する場合、ビューポートの幅が200であれば画面の1/2、400であれば画面の1/4程度の大きさで表示される。

ビューポートがいくらだと見やすいかは画面の物理的なサイズによる。なので機器ごとに「このサイズで表示するといい感じだよ」という値が設定されている。それがdevice-widthである。

webページのユーザビリティ指標でdevice-widthの設定が推奨されるのは、つまりメーカーの想定する使いやすいサイズに合わせろということだ。

ビューポートを設定したのにコンテンツが小さく表示されてしまう（ピンチインで縮小できてしまう）場合がある。それはコンテンツサイズがビューポートより大きいからである。

コンテンツの横幅が設定したwidthをはみ出していると、ブラウザは横幅がすべて収まるサイズまでビューポートを広げる。

これはPCでいうとウィンドウにスクロールバーが出ている状態である。この状態をモバイルブラウザは広いページをズームした状態として表現する。

なおビューポートを広げずにスクロールさせたい場合はbodyの内側にdivなどを配置してそちらがスクロールする（bodyをはみ出さない）ようにすると実現できる。

initial-scaleは最初にそのページを開いたときのズーム状態である。ただしこの基準はページのサイズではなく、device-widthである。

機器に設定されたdevice-widthが350の場合、initial-scale=1とした場合は幅350までが画面に収まる状態が初期表示となる。

つまりinitial-scale=1を設定するということは、ページサイズがどうであれ、とりあえず機器が推奨するサイズまでズームして表示するということになる。

なおinitial-scaleを設定しなかった場合は、横幅全域が収まるサイズで初期表示される。

initial-scaleによって導かれたサイズがwidthで設定した値を上回る場合がある。

例えばwith=350, initials-cale=1と設定した場合、device-widthが450の端末では、初期表示サイズは450となりwidthの350を上回る。このときブラウザはビューポートを450に広げる。

ここまでの内容より、よく言われる「width=device-width, initial-scale=1」とは「機器の推奨するサイズで表示を試み、もしオーバーした場合はいい感じにズームしておく」という設定である。

またビューポートの横幅（最も縮小できる全体表示）は以下ということになる。

Max { withの設定値, コンテンツサイズ, initial-scaleの設定値×device-width }

したがってレイアウトの都合でモバイル表示時の画面サイズを固定したい場合は次のようにすることで実現できる。

ただし端末によって文字の視認性が悪かったり、googleなどのユーザビリティ評価は下がるかもしれないが。