#1画面サイズ・解像度

画面解像度とビューポートサイズの違い

画面解像度 は OS が認識しているディスプレイ全体のピクセル数（CSS px）で、ビューポートサイズ は実際にブラウザが Webページを描画している領域のサイズです。 ブラウザのアドレスバー・ブックマークバー・拡張機能パネル・タスクバー等の UI 要素を除いた「コンテンツが表示される矩形」がビューポートになります。 ウィンドウを最大化していても、解像度より少し小さいビューポートになるのはこのためです。

DPR（デバイスピクセル比）

DPR は 1 CSS px が物理ピクセル何個に対応するか を示す値です。 一般的なフルHDモニター（DPR=1）では「CSS の 1px が画面の 1 物理ピクセル」ですが、 高精細ディスプレイ（DPR=2 や 3）では「CSS の 1px が 2x2 や 3x3 の物理ピクセルで描画」されます。 これにより、文字や画像のジャギ（ギザギザ）が目立たず滑らかに見えます。 iPhone・Macの Retina ディスプレイ、Windows の高DPI設定、4Kノートパソコンなどが DPR≥2 になりやすい代表例です。

物理ピクセル数の計算方法

物理ピクセル = CSS解像度 × DPR で求められます。 例えば 1920×1080 の CSS 解像度で DPR が 2 なら、物理ピクセルは 3840×2160（いわゆる 4K 相当）。 CSS 解像度 1440×900 で DPR 2 なら、物理は 2880×1800。 画像を用意する Web デザイナーは、この物理ピクセル数を意識して@2x / @3x 画像や srcset 属性で高解像度版を提供します。

Webデザイン・レスポンシブでの活用

CSS の @media (min-width: 768px) のようなブレイクポイントは ビューポート幅（CSS px） を見ています。 物理ピクセル数ではないので、Retinaの iPad（物理 2048px）でもビューポートは 768〜1024px として扱われ、 適切なレイアウトが選択されます。 一方、画像のシャープさを保つには srcset や image-set() で物理ピクセルに合った画像を出し分けます。

モバイル端末特有の注意点

スマートフォンの場合、ホームバー・通知バー・ソフトウェアキーボード が表示されるとビューポート高さが変わるため、 CSS の 100vh がページ表示と一致しないことがあります。 iOS Safari ではこれが顕著で、近年は 100dvh（dynamic viewport height）を使うことで動的に追従するレイアウトを書くのが推奨されています。 本ツールでは現在のビューポート高さがリアルタイムで反映されるので、向き変更や下スワイプでの値の変動も確認できます。