画面解像度とビューポートの違い
Webデザインやフロントエンド開発において、画面解像度（スクリーンサイズ）とビューポートサイズ（ブラウザの表示領域）の違いを理解することは重要です。画面解像度は物理的なディスプレイのピクセル数を示しますが、ビューポートは実際にWebページが表示される領域を指します。
タスクバーやブラウザのツールバー、スクロールバーなどが占有するスペースはビューポートには含まれません。当ツールは、これら両方の数値を正確に測定し、レスポンシブデザインのレイアウト検証やデバッグ作業をサポートします。
デバイスピクセル比（DPR）の役割
近年のスマートフォンや高精細モニターでは、物理的なピクセル数とCSS上で扱われる論理ピクセル数が異なります。この比率を示すのがデバイスピクセル比（devicePixelRatio）です。例えば、DPRが2の場合、CSSでの1ピクセルは物理的な2×2ピクセルで描画されます。
この数値を確認することで、高解像度ディスプレイでも画像がぼやけないように、通常の2倍や3倍といった適切なサイズの画像アセットを準備する目安となります。
プライバシーと安全な測定環境
このツールは、JavaScriptのwindow.screenオブジェクトやwindow.innerWidthなどを利用して、すべてお使いのブラウザ内（クライアントサイド）で直接計算を行います。外部のサーバーへディスプレイ情報や閲覧環境のデータが送信されることは一切ありません。
外部モニターの詳細な配置設定や、ブラウザ側で取得が制限されている色深度・リフレッシュレートなどの情報は取得できない場合がありますが、QAテストに必要十分な数値を安全かつ瞬時に確認できます。
よくある質問
高解像度のディスプレイを使っているのに、表示される画面幅が予想より小さいのはなぜですか？
OSやブラウザの表示スケール設定（拡大縮小レイアウト）が影響しているためです。高精細ディスプレイでは文字やUIが小さくなりすぎないよう、物理ピクセルではなくデバイスピクセル比（DPR）で調整された論理ピクセル値がブラウザに報告されます。
レスポンシブデザインの設計では、どのサイズを基準にすべきですか？
ブラウザのビューポートサイズ（表示領域）を基準に設計してください。ユーザーが実際にWebコンテンツを見る領域は、タスクバーやブラウザのUIを除いたビューポート部分に依存するため、CSSのメディアクエリでもこの値が使われます。
高精細スクリーンで画像がぼやけないようにするにはどうすればよいですか？
デバイスピクセル比（DPR）が2以上のディスプレイ向けに、通常の2倍以上の解像度を持つ画像を用意します。HTMLのsrcset属性を使用することで、ブラウザがDPRに応じて最適な画像を自動的に選択するようになります。
ブラウザの「利用可能な画面領域」と「画面解像度」の違いは何ですか？
画面解像度はディスプレイ全体の物理的なサイズを指します。一方、利用可能な画面領域は、WindowsのタスクバーやmacOSのDockなど、OSのシステムUIが占有している部分を差し引いた、アプリケーションが最大化できる領域のサイズです。
ツールの不具合や改善案はありますか。 フィードバックを送る