使い方
- ページを開くと、ブラウザーから値がすぐに読み取られます。
- ウィンドウのサイズを変更するか、デバイスを回転させると、ビューポートのサイズと向きが更新されます。
- 「すべてコピー」を使うと、情報をバグ報告やサポートへの問い合わせに貼り付けられます。
仕組み
ブラウザーが報告するサイズはCSSピクセル単位です。これはWebページのレイアウトに使われる単位です。高密度ディスプレイでは、1 CSSピクセルを複数の物理ピクセルで描画します。その数を示すのがデバイスピクセル比（DPR）です。たとえば、390 × 844と報告するDPR 3のスマートフォンでは、パネルのデバイスピクセル数は約1170 × 2532です。デスクトップでは、ブラウザーのズームとOSのディスプレイの拡大縮小設定の両方がDPRとCSSサイズに影響します。そのため、拡大率125 %の2560 × 1440モニターは、2048 × 1152と報告されます。
画面解像度はディスプレイ全体のサイズです。利用可能な画面領域は、WindowsのタスクバーやmacOSのメニューバーなど、常時表示されるOSのバーを除いた領域です。ビューポートは、ツールバーを除き、スクロールバーを含む、ブラウザーウィンドウ内でページが表示される領域です。CSSのメディアクエリ（min-width: 768pxなど）が参照するのはビューポートなので、レスポンシブレイアウトのテストではこの数値を確認してください。
配色設定と動きの軽減設定は、Webサイトがシステム設定に合わせて表示を調整する際に使うものと同じCSSメディア機能から取得されます。ブラウザーのブランド、プラットフォーム、モバイル情報はUser-Agent Client Hintsから取得しますが、この情報を提供するのはChromiumベースのブラウザーのみです。フィンガープリンティングを防ぐため、一部のブラウザーではこれらの値を意図的に丸めたり固定したりするため、実際のハードウェアと完全には一致しない場合があります。
使用例
レスポンシブレイアウトのテスト
同僚のノートパソコンでレイアウトが崩れています。同僚から共有された情報には、DPR 1.5、ビューポート1280 × 649と表示されています。ブラウザーのデバイスツールバーで同じビューポートを設定すると、問題を再現できます。
画像サイズを選ぶ
商品画像を幅400 CSSピクセルで表示する場合、DPR 3のスマートフォンでは鮮明に表示するために1200ピクセルが必要です。この情報をもとに、srcsetに含める画像サイズを決められます。
モニターの拡大率を確認する
3840 × 2160のモニターがDPR 1.5で2560 × 1440と報告されています。Windowsのディスプレイ拡大率が150 %に設定されています。
よくある質問
画面解像度がモニターの仕様と異なるのはなぜですか？
ブラウザーが報告するのはCSSピクセルで、物理ピクセルを拡大率で割った値です。デバイスピクセル比を掛けると、ハードウェアの解像度に近い値になります。ブラウザーのズームも報告される値に影響します。
画面サイズとビューポートサイズの違いは何ですか？
画面サイズはディスプレイ全体のサイズです。ビューポートは、ブラウザーウィンドウ内でページが表示される領域のみを指すため、画面サイズより小さく、ウィンドウのサイズ変更や開発者ツールの表示によって変化します。
この情報を使って追跡されますか？
このページでは利用されません。値は画面に表示されるだけで、保存も送信もされません。ただし、Webサイトは同じ値を読み取れます。フィンガープリンティングを困難にするため、一部のブラウザーでは値を丸めています。
ノートパソコンでタッチ対応と表示されるのはなぜですか？
タッチ対応は、ブラウザーが報告するタッチポイントの数に基づいています。タッチスクリーン搭載のノートパソコンは、主にマウスを使っていてもタッチ対応として報告されます。また、一部のドライバーやリモートデスクトップ環境では、タッチスクリーンがなくてもタッチ対応と報告されることがあります。
プライバシー
すべての値はブラウザー内のJavaScriptで取得され、あなただけに表示されます。保存、アップロード、アクセス解析への送信は行われません。記録されるのは、ツールが開かれて使用されたことを示す匿名イベントのみです。