ビューポート

ビューポートとは

ビューポートは、ブラウザー内でウェブページが表示される領域です。画面の物理的な大きさと同じとは限らず、ブラウザーのUI、拡大率、ソフトウェアキーボードなどによって変化します。

どんな場面で使うか

レスポンシブデザインの基準を考える、CSSのvwやvhを使う、スマートフォンでページ幅と拡大率を適切に扱う、JavaScriptで現在の表示領域を調べるときに使います。

選ぶとき・使うときのポイント

スマートフォンではmeta viewportの指定がないと、広い仮想幅で縮小表示される場合があります。画面高を固定値として頼りすぎず、ズームを妨げず、縦横の向きやキーボード表示時にも主要な操作へ到達できるか確認します。