viewport設定メモおよび「width=device-width, initial-scale=1」とは何か
これはmetaタグのviewportの設定に関するメモである。ビューポートの設定は癖があり思い通りにならないので、検証した結果を記載しておく。 モバイルブラウザでのみ有効 ビューポートはモニタの仮想解像度 device-widthはモニタの推奨値 コンテンツがはみ出すとビューポートは広がる initial-scaleの基準はdevice-width initial-scaleがwidthを上回るとビューポートは広がる ビューポートをコントロールしたいとき モバイルブラウザでのみ有効 viewportの設定はスマートフォンなどモバイル版のブラウザでのみ有効となり、PCブラウザでは無視される。 これは長らくドットバイドット表示でウィンドウサイズも可変であったPCに対し、高解像度モニタとズームを用いるスマートフォンでの表示を想定した機能であるため。 ただしこれらは歴史的経緯のためタブレットや2in1PC、および4Kモニタの存在など、今後どうなるかは定かではない。 ビューポートはモニタの仮想解像度 スマートフォンは5インチ幅に1000ピクセル以上などの大きな画素数を持っている。このサイズ感でPCモニタと同じように等倍表示すると、コンテンツが非常に小さく表示されてしまう。 そこで実際の解像度とは別に仮想解像度を設定して、あたかもそのサイズであるかのように調整して描画する。このサイズがビューポートである。 例を挙げると、幅100pxの画像を表示する場合、ビューポートの幅が200であれば画面の1/2、400であれば画面の1/4程度の大きさで表示される。 device-widthはモニタの推奨値 ビューポートがいくらだと見やすいかは画面の物理的なサイズによる。なので機器ごとに「このサイズで表示するといい感じだよ」という値が設定されている。それがdevice-widthである。 webページのユーザビリティ指標でdevice-widthの設定が推奨されるのは、つまりメーカーの想定する使いやすいサイズに合わせろということだ。 コンテンツがはみ出すとビューポートは広がる ビューポートを設定したのにコンテンツが小さく表示されてしまう（ピンチインで縮小できてしまう）場合がある。それはコンテンツサイズがビューポートより大きいからである。 コンテンツの横幅が設定したwidthをはみ出していると、