画面解像度ツールとは？
画面解像度ツールは、現在のスクリーンサイズ・ピクセル密度・デバイスピクセル比・ビューポートサイズを検出・表示するツールです。レスポンシブデザインのテスト・正確な解像度でのアセット作成・ディスプレイ問題のトラブルシューティング・モニター設定の選択に役立ちます。
使い方
- 測定したいデバイスでこのページを開きます。
- 画面解像度（幅×高さ ピクセル）・デバイスピクセル比（DPR）・ビューポートサイズ・色深度を確認します。
- ブラウザウィンドウをリサイズすると、ビューポートサイズがリアルタイムで更新され、レスポンシブブレークポイントのテストに便利です。
基礎知識
画面解像度はディスプレイが表示できるピクセル総数で、幅×高さ（例: 1920×1080）で表されます。デバイスピクセル比（DPR）は1つのCSSピクセルに対応する物理ピクセル数を示し、Retinaディスプレイは通常DPR 2または3です。ビューポートはブラウザウィンドウの可視領域で、ツールバー・タスクバー・ブラウザの枠により画面解像度より小さくなることがあります。
よくある質問
画面解像度とビューポートサイズの違いは？
画面解像度は物理ディスプレイの総ピクセル数です。ビューポートサイズはブラウザ内でWebコンテンツをレンダリングできる領域で、ツールバー・スクロールバー・ブラウザフレームは含みません。レスポンシブCSSメディアクエリは画面解像度ではなくビューポートを対象にします。
デバイスピクセル比とは？
デバイスピクセル比（DPR）は物理ピクセルとCSSピクセルの比率です。DPR 2は各CSSピクセルが2×2の物理ピクセルグリッドでレンダリングされることを意味し、Apple Retinaディスプレイなどの高DPIスクリーンでテキストや画像がより鮮明に表示されます。
表示される解像度がモニターのスペックと異なるのはなぜですか？
OSのディスプレイスケーリングにより実効解像度が変わることがあります。例えば4Kモニター(3840×2160)を200%スケーリングで使用すると、ブラウザには1920×1080 CSSピクセルとして報告されます（物理パネルのピクセル数は4倍あります）。