スマートフォンやタブレットには仮想のウィンドウサイズが設定されており、この仮想ウィンドウサイズを調整するものが「Viewport」です。
スマホなどの仮想ウィンドウサイズは横幅980pxに設定されており、Viewportが設定されていないPCサイトを閲覧すると、スマホの小さな画面でこの横幅で表示されることになります。
そのためスマホ向けページも、デフォルトのままでは横幅980pxで表示されてしまいます。スマホで見やすいように仮想ウィンドウサイズに合わせるには、Viewportの設定が必要です。
Viewportでは端末の横幅に合わせるにはmeta要素に「content=”width=device-width”」の記述を行います。ケースに応じて下記のオプションを加えて調整すると良いでしょう。
—
Viewportのフォーマット
■ width:
仮想ウィンドウサイズの横幅のピクセル数を設定可能。端末の画面幅に合わせる場合は「device-width」という値を用いる。
■ height:
仮想ウィンドウサイズの高さのピクセル数を設定可能。端末の画面高さに合わせる場合は「device-height」という値を用いる。
■ initial-scale:
初期のズーム倍率を設定します。倍率はminimum-scaleからmaximum-scaleの範囲に制限される。
■ minimum-scale: 最小のズーム倍率を設定する。
■ maximum-scale: 最大のズーム倍率を設定する。
■ user-scale:
ズーム操作の有無を設定。デフォルトでは「yes」が設定されており、「no」を設定するとユーザーはズームの操作が行えなくなる。