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

web

高解像度デバイスの問題

解像度とは

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

CSSピクセルとデバイスピクセル

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

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

高解像度デバイスの何が問題か

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

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

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

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

デバイスピクセルの調整処理

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

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx)              /* The Future */
  /*高解像度時のスタイルを記述する*/
}

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

アマルウェブ HOME