ビューポートサイズとスクリーン解像度の違い
CSSビューポートサイズと物理スクリーン解像度の重要な違い、ブラウザクロームとDPRがそれぞれに与える影響、どの測定値をいつ使うべきかを理解します。
Viewport & Screen
詳細な説明
ビューポートとスクリーン解像度
この2つの概念はよく混同されますが、Web開発では異なる目的を果たします。
スクリーン解像度
screen.widthとscreen.heightで返され、OSがディスプレイに報告する総ピクセル数を表します。
ビューポートサイズ
ビューポートはWebコンテンツのレンダリングに利用可能な領域です。document.documentElement.clientWidthとclientHeightで測定されます。ブラウザのアドレスバー、タブ、スクロールバー、OSタスクバーなどを除外するため、常にスクリーン解像度以下です。
DPRによる複雑さ
DPR 2のMacBook Pro（ネイティブ解像度2560×1600）では：
| プロパティ | 値 |
|---|---|
| screen.width | 1280（CSSピクセル、スケーリング済み） |
| screen.height | 800 |
| ビューポート幅（概算） | 1280（スクロールバー分を除く） |
| 物理ピクセル | 2560 × 1600 |
どれを使うべきか？
- レイアウトとレスポンシブデザイン: ビューポートサイズ（
clientWidth） - フルスクリーンアプリ:
screen.width/screen.height - CanvasまたはWebGLレンダリング: ビューポートサイズ × DPR
ユースケース
レスポンシブレイアウトのデバッグを行う開発者は、デバイス間で要素が異なるレンダリングをする理由を理解するために、スクリーン解像度とビューポートサイズを区別する必要があります。