ビューポート とは？

ブラウザでウェブページが表示される領域のことだよ。PCなら画面全体の幅、スマホなら端末の画面幅がビューポートになる。このサイズに応じてページの見え方が変わるんだ。

スマホのブラウザはデフォルトで「PCサイトを縮小して表示する」動作をするんだ。meta viewportタグで「width=device-width」と指定すると「デバイスの画面幅に合わせて表示してね」と伝えられる。これがないとスマホでもPC向けの幅でページが表示されて、文字がすごく小さくなるよ。

ページを最初に開いたときの拡大率だよ。「initial-scale=1.0」なら等倍、つまり拡大も縮小もしない状態で表示される。ほとんどの場合をそのまま書けばOKだよ。

実はCSSにはビューポートに関する単位がいくつかあって、ここが混乱しやすいんだ。vw・vhは画面幅・高さの1%を表す単位で便利なんだけど、スマホの「100vh問題」がある。スマホブラウザはアドレスバーがスクロールで隠れたり出たりするから、100vhの高さが変動してガタつく。これを解決するためにCSS仕様にsvh（小さいビューポート高）、lvh（大きいビューポート高）、dvh（動的ビューポート高）が追加されたんだけど、どれを使うべきかはケースバイケースで、フルスクリーンUIを作るときに地味にハマるポイントなんだよ。