画面サイズ検出ツール

参考

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

ビューポートはブラウザウィンドウ内のWebページの可視領域で、CSSピクセルで測定されます（window.innerWidth × window.innerHeight）。ブラウザのリサイズやDevToolsを開くと変化します。画面解像度は物理ディスプレイの総ピクセル数（screen.width × screen.height）で、ハードウェアとディスプレイ設定によって固定されています。レスポンシブWebデザインではビューポートが重要です — CSSメディアクエリやブレークポイントがどれがアクティブになるかを決定します。

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

デバイスピクセル比（DPR）は1つのCSSピクセルに対応する物理（ハードウェア）ピクセルの数を示します。DPR 1は1:1のマッピング（標準ディスプレイ）。DPR 2はRetina/HiDPIディスプレイ — 各CSSピクセルが4つの物理ピクセル（2×2）でレンダリングされ、よりシャープなテキストと画像を実現。DPR 3はハイエンドスマートフォンで一般的。これが重要な場面: 高DPR画面への@2x/@3x画像の配信、Retinaディスプレイのスクリーンショットが期待の2倍の解像度になる理由の理解、特定のDPR値でのみ発生するレイアウト問題のデバッグ。

画面検出のユースケース

レスポンシブデザインのテスト — DevToolsを開かずにCSSブレークポイントが正しいビューポート幅で発動するか確認。バグレポート — 表示問題を開発者に報告する際に正確なビューポートサイズ、画面解像度、DPRを共有。スクリーンショット計画 — ドキュメントやアプリストアのリスティング用スクリーンショットを撮る前に正確な寸法を把握。広告&バナーサイズ — ビューポートの寸法がディスプレイ広告の必要な広告枠サイズと一致するか確認。

プライバシー

画面の寸法はブラウザAPIからローカルに取得されます。データはサーバーに送信されません。