デバイスピクセル比

同じCSS上の大きさを、密度の異なる画面が異なる数の物理ピクセルで描くレイアウトの単位と画面の発光点を分けて読む

四つの量を混ぜない

高密度画面でも文字や箱が小さくならない理由

物理ピクセルだけを基準に幅を決めると、高密度画面では同じピクセル数が非常に小さく見えます。そこでOSとブラウザは、複数の物理ピクセルを一つのCSSピクセルとして扱い、読みやすい論理寸法を作ります。

つまり、デバイスピクセル比が高いほどWebページ全体が自動的に小さくなるわけではありません。レイアウトはCSSピクセルでほぼ同じ大きさを保ち、線や文字の輪郭をより細かな物理ピクセルで描けるようになります。

比率は端末の固有番号ではない

window.devicePixelRatioは「この端末は常に2」という固定値ではありません。デスクトップOSの表示倍率を変えたとき、ブラウザのページズームを変えたとき、異なる密度の外部ディスプレイへウィンドウを移したときに変化し得ます。

CSSOM Viewの定義では、現在のページズームを考慮したCSSピクセルの大きさと、物理ピクセルの大きさとの比として扱われます。ページズームはCSSレイアウトに使える論理領域やdevicePixelRatioへ影響します。一方、指で行うピンチズームは、レイアウトを組み直さず見えている部分を拡大する実装が一般的で、同じ操作として扱えません。

ブラウザはプライバシー保護や互換性のため値を丸めることもあります。値だけから機種名、実際の画面寸法、正確なPPIを特定することはできません。

画像は表示寸法と素材の画素数を分ける

CSSで300px幅に表示する写真を高密度画面でも鮮明にしたい場合、600物理ピクセル程度の横幅を持つ素材を候補として用意できます。ただし、常に最大画像だけを送ると通信量とメモリ使用量が増えます。

HTMLのsrcsetへ1x・2xの候補を記述すると、ブラウザが表示密度などを考慮して選べます。表示幅が画面幅で変わる写真では、幅記述子とsizesを使い、レイアウト上の必要幅も伝えます。SVGや文字のようなベクター表現は、輪郭を計算して描けるため、原則として密度ごとのラスター画像を用意する必要がありません。

canvasは表示サイズだけではぼやける

canvasにはCSS上の表示寸法と、内部の描画バッファ寸法があります。両方を300×150のまま高密度画面で表示すると、少ないバッファを拡大してぼやける場合があります。

表示寸法をCSSで保ったまま、内部バッファを実際の比率に応じて増やし、描画座標を拡大して合わせます。ただし巨大なcanvasはメモリと描画時間を消費するため、上限を設け、ウィンドウが別画面へ移った場合やズームが変わった場合の再描画も検討します。

端末判定ではなく描画品質の調整に使う

比率が2ならスマートフォン、1ならパソコン、という判定は成立しません。高密度ノートPC、表示倍率を上げたデスクトップ、外部画面などが同じ値になり得ます。レイアウトは表示領域幅、入力方法はpointerやhoverのメディア機能、機能は実際のAPI対応状況を確認します。

デバイスピクセル比は「どの端末か」ではなく、「現在のCSS上の大きさを何個の物理ピクセルで描くか」を表す縮尺です。高密度画像やcanvasの品質調整には役立ちますが、機種や画面の物理寸法を断定する情報ではありません。

CSSピクセルとdevice pixel ratio、ページズーム、VisualViewportとの関係：W3C「CSSOM View Module」