移行中の知識
ビューポート
Viewport
定義
ビューポート（viewport）とは、Web browserがdocumentのlayoutや表示を考える基準となる表示領域です。Webではlayout viewportと、pinch zoomやonscreen keyboardなどで実際に見えている範囲が変わるvisual viewportを区別する場合があります。responsive designでは物理screen寸法そのものではなく、CSS pixelで利用できるviewportの幅や高さを基準にlayout条件を考えます。mobile browserではviewport meta設定も初期layoutの重要な前提になります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
local business websiteのmobile review
smartphoneでdesktop縮小表示になっていないか確認する
見るポイント
deviceの物理横幅だけを見ず、browserがどのviewport幅としてpageをlayoutしているかを確認する。desktop向けの広いlayoutが縮小表示されているだけなら、responsive対応とは別問題として扱う。
desktop responsive QA
PCでwindow幅を変えてlayoutの遷移を見る
見るポイント
full-screenのmonitor幅だけを前提にせず、browser windowを狭めた時にもnavigation、本文行長、column構成が破綻しないかを見る。PCでもviewportは固定ではない。
注意
誤解しやすい点
- viewportをdeviceの物理screen sizeと同じものとして扱う。
- layout viewportとvisual viewportが常に同じ大きさだと考える。
- PCでは常に最大化windowだけを前提にし、中間幅での崩れを確認しない。
関連
関連する概念
出典