ディスプレイ

画面サイズ・解像度チェッカー（自動検出・DPR・ビューポート）

今お使いのデバイスの画面解像度・ビューポートサイズ・DPR（デバイスピクセル比）・物理ピクセル数を自動検出してリアルタイム表示するツールです。

#1画面サイズ・解像度

画面解像度800 × 600

ビューポート800 × 600

デバイスピクセル比（DPR）1.00x

A. 論理ピクセル（CSS）

画面サイズ800 × 600 px

ビューポート800 × 600 px

ウィンドウ（外枠）756 × 556 px

アスペクト比（画面）4:3

B. 物理ピクセル

画面（物理）800 × 600 px

ビューポート（物理）800 × 600 px

C. カラー・向き

カラー深度24 bit

画面の向き縦向き（portrait）

論理ピクセル（CSSピクセル）はブラウザやOSが扱う仮想的なピクセル単位で、物理ピクセルはディスプレイの実際の画素数です。高解像度ディスプレイでは1つの論理ピクセルが複数の物理ピクセルで描画されます。

DPR（Device Pixel Ratio）は物理ピクセル数を論理ピクセル数で割った値です。 DPR 1.0 は標準解像度、2.0 は Retina（HiDPI）ディスプレイを意味します。 DPR が高いほど文字や画像がシャープに表示されます。

画面解像度（screen）はディスプレイ全体のサイズ、ビューポート（viewport）はブラウザの表示領域、ウィンドウ（window outer）はブラウザのタブやツールバーを含む外枠サイズです。レスポンシブデザインではビューポートサイズが最も重要です。

スマートフォンは高い物理解像度を持ちますが、DPR が 2〜3 と高いため論理ピクセル数は比較的小さくなります。例えば物理解像度 1170×2532 の iPhone でも、論理解像度は 390×844 程度です。 Webデザインでは論理ピクセルを基準にレイアウトを組みます。