ビューポートとは

ビューポートは、ブラウザーの中で Web ページが実際に表示される領域のことです。パソコンではウィンドウの表示部分、スマートフォンでは画面の幅が基準になります。

viewport の指定

スマートフォンのブラウザーは、何も指定しないとパソコン向けの広い幅でページを描いてから縮小して表示します。そのため、レスポンシブ なサイトでは HTML の head に次のように書き、画面の幅に合わせて表示させます。

• meta name="viewport" content="width=device-width, initial-scale=1"

利用者が拡大できなくなる指定（user-scalable=no など）は、文字を大きくして読みたい人の妨げになるため避けます。

CSS での使い方

• vw・vh：ビューポートの幅・高さに対する割合の単位（1vw は幅の 1%）
• スマートフォンではアドレスバーの表示で高さが変わるため、dvh・svh・lvh といった単位も使われる
• メディアクエリで、ビューポートの幅に応じてレイアウトを切り替える

JavaScript での使い方

• 表示中の領域の大きさを取得し、要素の位置を計算する
• 要素がビューポートに入ったかどうかを Intersection Observer で調べ、画像の遅延読み込みやアニメーションの開始に使う

関連用語

レスポンシブ、DOM、フロントエンド