デバイスごとの解像度差をdevicePixelRatioで調整する方法

高解像度デバイスの問題

解像度とは画像の密度を表す数値です。同じ大きさの範囲でも、解像度が1×1では１マスにしか表現できませんが、100×100なら1万マスに表現できます。解像度が高いほど細かい文字や画像の細部まではっきり表示できるようになる訳です。

CSSで使うピクセル（px）は「CSSピクセル(CSSpx)」といいます。
対してデバイスのピクセルは「デバイスピクセル(dpx)」といいます。

近年スマートフォンなどでデバイスピクセル密度がどんどん上がっています。デバイスピクセル比が等倍だったものが、1.5倍となり、2倍となり、3倍の機種まで出ました。どんどん細かい表現が可能になってきています。

デバイスピクセル比が等倍のデバイスと3倍のデバイスを比べた場合、画面サイズが同じだと縦×横で９倍ものピクセルを持ちます。

このままでは等倍デバイスで画面いっぱいに表示されている内容が、3倍デバイスでは1/9の大きさで表示されます。そのため高解像度デバイスは１つのCSSピクセルを複数のデバイスピクセルで表示します。要は引き伸ばします。

文字はデバイスフォントであるため、高解像度になっても崩れず、綺麗に細部まで表現されます。問題は画像などのビットマップデータです。

ビットマップデータは本来の解像度から引き伸ばされて表示されます。つまり画像は高解像度デバイスでむしろぼやけてしまうのです。

デバイスピクセル差を埋める手段の一つに、デバイスピクセル比ごとに使う画像を振り分けることが挙げられます。 webkit系はdevice-pixel-ratioで、将来的にはresolutionCSSを使う事がW3Cで推奨されています。

media (min-resolution: 1.5dppx)
  /*高解像度時のスタイルを記述する*/
}

デバイスピクセル比の高い端末で見た時にぼやける画像がある場合、device-pixel-ratioが高い環境下では高解像度の画像を使用するように指定すると解決します。