「たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる」のメモ

「ウィンドウ幅1000px」≠ 物理的な画素数1000px

vireportとは、ユーザに見えない仮想的なウィンドウ。
デフォルトでは、980pxに設定されている。

ブラウザは、viewport上のWebページを拡大・縮小して画面に表示する。
拡大縮小の比率を「スケール」と呼ぶ。

スケールのデフォルト値は、viewport上でレイアウトされたWebページを縮小して画面の幅にピッタリ収めるような値。
iPhone7の場合、幅980pxのWebページを縮小して幅375pxの画面で表示するため、デフォルトのスケールは 375/ 980 = 約0.38である。
よって、文字や画像はパソコンで見る場合と比べて約3分の1の大きさとなる。

meta viewportをつける目的

PCの時のビューポート幅は常にデバイス幅と一緒？

以下二つの項目に当てはまるとき、widthの指定は無視される。

• widthとinitial-scaleを同時に指定している。
• widthとinitial-scaleの積がデバイス幅より小さい。（大きい場合は無視されない）

widthが無視されたとき、またはwidthを指定せずinitial-scaleのみ指定したときのviewport幅

• デバイス幅をinitial-scaleで割った値になる
• initial-scaleが1のとき、viewport幅とデバイス幅は等しくなる。（デバイス幅414pxのとき、viewport幅も414px）