Device Pixel Ratio
物理ピクセル (= デバイスピクセル) と論理ピクセル (=CSSピクセル) の比率
window.devicePixelRatio (dpr) で得られる値 簡単に言い換えると
CSSでの1pxを、デバイスピクセル使って表現しているか？という値
Retinaディスプレイは上図の中央 (dpr=2) になっている
これこそが
Retina環境でウェブページのキャプチャを撮ると画像サイズが縦横2倍になる現象の理由
dpi awareなimg CustomElementをつくるの話題が生まれる
将来的には冒頭図の右端の例のようにdpr=3になるデバイスも出てくる？
デバイスとDPR対応表 (
調べ)
| DPR | |
| MacBook Air 2014 | 1.0 |
| MacBook Pro 2017 Retina | 2.0 |
| Pixel Slate | 2.25 |
| Pixel 3a | 2.75 |