Viewport、Screen、Responsive Breakpoints
Viewport は、ブラウザが Webページのレイアウト用に提供する表示領域です。CSS vw、media query や多くの layout 計算はこれを基準にします。Screen は OS が報告するディスプレイ全体の CSS サイズです。ブラウザが画面の半分しか占めていなくても、現在の Viewport と同じにはなりません。
端末名は画面幅の範囲を分かりやすく示すためのラベルにすぎず、デザインの唯一の基準にすべきではありません。より確実なのは、まず柔軟なレイアウトを作り、コンテンツが窮屈になる、意図しない改行が起こる、余白が大きくなりすぎる、といった地点でブレークポイントを追加する方法です。DPR は画像の鮮明さには影響しますが、CSS のレイアウト幅を直接変えるものではありません。
一般的な幅のカテゴリ
このツールは 640、768、1024、1440px を参考境界として、Mobile、Tablet、Laptop、Desktop、Wide Screen を順に表示します。実際のプロジェクトではデザインシステムに合わせて調整でき、すべての端末幅を個別に追いかける必要はありません。
よくある質問
Viewport とは何ですか？
Web page が現在 layout・表示できる CSS pixel area で、通常 innerWidth と innerHeight で確認します。
the difference between innerWidth and outerWidth とは何ですか？
innerWidth はコンテンツ Viewport を表し、outerWidth はブラウザウィンドウの枠や sidebar も含みます。
なぜ Screen Width のほうが大きいのですか？
Screen は画面全体を表し、ブラウザーはその一部だけを占める場合があります。
DPR によって Media Query は変わりますか？
一般に width クエリは CSS ピクセルを基準とし、DPR は主に CSS ピクセルと物理ピクセルの比率に影響します。
なぜスマートフォンの高さが変わるのですか？
モバイルブラウザの toolbar を表示／非表示にすると viewport height が変化します。dynamic viewport unit は、こうした状況の一部に対応できます。