移行中の知識
デバイスピクセル比
Device Pixel Ratio
定義
デバイスピクセル比（device pixel ratio / DPR）とは、display上でCSS pixelとphysical device pixelがどの比率で対応するかを表す値です。high-DPI displayでは1 CSS pixelを複数のdevice pixelで描画するため、同じCSS sizeでも必要なraster assetのpixel dimensionsが変わることがあります。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
Responsive Web image
2x画像を用意する
見るポイント
CSS上300px幅で表示するraster imageでもDPR 2のdisplayでは600 device pixel幅相当になるため、srcset等で高密度sourceを候補にする。
Custom Web graphics
Canvasのぼやけを調べる
見るポイント
CSS sizeだけに合わせたcanvas bitmapがhigh-DPI displayでぼやける場合、device pixel ratioを考慮したinternal bitmap sizeを確認する。
注意
誤解しやすい点
- DPRとPPI / DPIを同じ物理密度の単位として扱う。
- DPRが高いdeviceほどUIをCSS上大きく作る必要があると考える。
- raster assetは常に最大DPR向け1種類だけ用意すれば最適だと考える。
関連
関連する概念
出典