Screen Resolution、Viewport、DPR の違い
画面解像度 ディスプレイ全体を表します。ブラウザが返す CSS ピクセル寸法は、プライバシー保護、スケーリング、プラットフォーム差によって変わる場合があります。Viewport Web ページで実際に利用できるコンテンツ領域を指し、ウィンドウ、ツールバー、分割表示などによって変化します。Device Pixel RatioDPR は、1 CSS ピクセルが何個の Device Pixel に相当するかを示します。
Screen の CSS 幅・高さに DPR を掛けると物理ピクセル数の目安を求められますが、必ずしもディスプレイパネル本来の解像度と一致するとは限りません。OS の表示スケーリング、ブラウザーのズーム、外部ディスプレイ、プライバシー保護などによって結果が変わる場合があります。フロントエンド開発では、解像度から端末機種を推測するより、Viewport を基準にレイアウトを組み、DPR を使って適切な解像度の画像を選ぶ方が確実です。
テスト結果はどのように使われますか？
- Viewport を使って responsive typography と Media Query をテストします。
- DPR を使って Canvas の出力倍率や高密度画像リソースを決定します。
- touch support は操作性を改善する判断材料になりますが、スマートフォン判定の唯一の条件にはしないでください。
- Color Depth を使うと、ブラウザーが報告する color bit depth を確認できます。
よくある質問
entity resolution に「estimated」と表示されるのはなぜですか？
Web API が panel の native pixel 数を必ず公開するわけではないため、このツールでは screen size × DPR から推定します。
DPR 2 は何を意味しますか？
通常、CSS pixel 1 個を幅・高さ方向それぞれ 2 device pixels で描画していることを意味します。
なぜ Viewport と Screen は異なるのですか？
Viewport は Web ページの表示領域だけを示し、Screen はディスプレイ全体の CSS サイズを示します。
ブラウザーの拡大縮小は結果に影響しますか？
はい。表示スケーリングによって CSS pixel と DPR の取得値が変わる場合があるため、デバッグ時にはスケーリング設定も記録してください。
download した file に private information は含まれますか？
含まれるのはページに表示された screen、color、touch capability の情報だけで、account、location、file content は含みません。