デバイスの画面サイズと解像度

論理解像度と物理解像度、DPRの違い

最近の画面にはすべて2種類の解像度があります。物理解像度はパネルに実際に組み込まれているピクセル数そのもので、たとえばiPhone 15では1179 × 2556です。論理(CSS)解像度は、Webページがレイアウトされるより小さな座標空間で、393 × 852のような値になります。デバイスピクセル比(DPR)はこの両者をつなぐもので、物理解像度を論理解像度で割った値です。つまりDPRが3の場合、スマートフォンはCSS 1ピクセルごとに3 × 3の実ピクセルのブロックを描画していることになります。高精細な「Retina」対応のスマートフォンやノートPCはくっきりしたテキストや画像を描画するためにDPR 2または3を採用しており、一般的なデスクトップモニターはDPR 1で、CSS 1ピクセルが物理1ピクセルに相当します。

デザイナーがビューポートサイズで作業する理由

レスポンシブレイアウトを構築する際、CSSのメディアクエリやブレークポイントはパネルの物理ピクセルではなく、CSSピクセル — つまり論理ビューポート — で計測されます。物理的には1080ピクセル幅のスマートフォンでも、報告されるビューポートは360〜414 CSSピクセルほどしかなく、これが360pxのモバイル用ブレークポイントがほとんどのAndroidスマートフォンをカバーできる理由です。生の解像度ではなくビューポートを基準にデザインすることで、ピクセル密度が大きく異なるデバイス間でもテキストやタッチ操作の対象が一定の物理サイズに保たれ、低密度のノートPCでも高密度のフラッグシップスマートフォンでも同じレイアウトが自然に感じられます。

この表の読み方

• ビューポート(CSS px)はWebページが認識する論理サイズで、デバイス本来の向き — スマートフォンとタブレットは縦向き、ノートPCとモニターは横向き — で記載しています。
• 物理解像度はパネルの実際のピクセル数で、スペックシートに記載される数値です。
• DPR(デバイスピクセル比)はビューポートを物理解像度まで拡大する倍率で、1を超える値は高精細ディスプレイであることを示します。
• アスペクト比は画面の形状を表し、最近のスマートフォンに多い縦長の19.5:9から、ほとんどのモニターの16:9、ウルトラワイドの21:9や32:9まで様々です。
• ノートPCと4Kの行は一般的なデフォルトのディスプレイスケーリングレベルを反映しているため、ビューポートはパネルのネイティブ解像度より小さくなることがあります。

サイズはモデルごとに変わる

これらの数値は実用的な目安であり、保証されたものではありません。メーカーはほぼ世代ごとに画面サイズを見直しており、iPhoneだけでも近年のモデルで375、390、393、402、414、430、440 CSSピクセル幅のビューポートを採用してきました。Androidデバイスはさらに幅広くばらつきます。OSのディスプレイスケーリングも報告されるビューポートを変化させます。たとえば150%スケーリングの1080p Windowsノートは、DPR 1.5の1280 × 720画面のように振る舞います。最も信頼できる数値は常に自分のブラウザが報告する値であり、だからこそ上記の一致するデバイスはあなたの画面からリアルタイムで検出されます。