ビューポートとは
viewport（ビューポート）は、ブラウザでWebページを表示するために使える論理的な表示領域です。CSSの長さ、メディア問い合わせ、固定配置、スクロール位置等が参照する「窓」に相当します。
機器画面全体、ブラウザー時間窓、Web文書全体とは別です。タブbarやアドレス欄が画面の一部を使い、文書は表示領域より長く、スクロールによって見える部分が移ります。
モバイルではレイアウト表示領域と視覚表示領域を分けると、ピンチ操作拡大や画面上のキーボードで「レイアウトは同じなのに見える範囲だけ変わる」現象を説明できます。
五つの領域を分ける
スクロールは文書を作り直す操作ではない
通常のスクロールは既にレイアウトされた文書に対し、表示領域が見るずれを変えます。position: fixedの要素は表示領域へ固定され、通常流れのコンテンツは下を通過します。
position: sticky、スクロールコンテナー、transformがあると、位置の基準となる包含ブロックが変わります。固定したヘッダーが本文を隠さないよう、スクロール余白とフォーカス移動を確認します。
サイズ変更と画面方向変更はレイアウトを変える
時間窓幅が変わるとメディア問い合わせ、フレックス・グリッド、行折り返し、画像大きさが再計算されます。スマートフォンを縦向きから横向きへ回す場合も論理的な表示領域寸法が変わります。
機器名やUser-Agentで列数を固定せず、コンテンツが読めるブレークポイントを実寸で決めます。分割画面やデスクトップ時間窓では同じ機器でも幅が連続的に変わります。
ページ拡大とピンチ操作拡大は同じではない
CSSOM Viewは、ページ拡大が初期表示領域の大きさへ影響し、視覚表示領域規模倍率は拡大鏡のようにレイアウトを変えず見える範囲を変える、と区別します。
ブラウザー・プラットフォーム実装差はありますが、ピンチ操作後にwindow.innerWidthだけを見てオーバーレイ位置を決めるとずれる場合があります。VisualViewport APIのずれ・大きさを必要時に使います。
モバイル表示領域設定は論理的な幅の初期値を伝える
モバイルブラウザーはデスクトップ向けサイトを縮小表示するため、広い既定レイアウト表示領域を仮定することがあります。表示領域metaで機器幅と初期規模を示すとレスポンシブCSSを意図した論理的な幅で適用できます。
利用者拡大を禁止する設定は弱視利用を妨げます。拡大可能性を残し、強い拡大でもコンテンツが欠けず再配置するか確認します。
画面上のキーボードは見える範囲を狭める
入力へ焦点するとキーボードが画面を覆うか視覚表示領域を縮めます。画面下部固定ボタンやダイアログがキーボード下へ隠れないよう、視覚表示領域変化と安全領域を考慮します。
ビューポートはWebページを見る論理的な窓です。物理画面やブラウザーウィンドウ、文書全体とは区別し、レイアウトビューポートと視覚ビューポートの差を使って、サイズ変更、拡大、画面キーボードの影響を説明します。
CSS pixel、page zoomとvisual viewport scale、viewport・screen情報、VisualViewport API：W3C「CSSOM View Module」。viewport metaとlayout viewport adaptation：W3C「CSS Viewport Module Level 1」