物理ピクセル (= デバイスピクセル) と論理ピクセル (=CSSピクセル) の比率

window.devicePixelRatio (dpr) で得られる値

簡単に言い換えると

CSSでの1pxを、デバイスピクセル使って表現しているか？という値

Retinaディスプレイは上図の中央 (dpr=2) になっている

これこそが

Retina環境でウェブページのキャプチャを撮ると画像サイズが縦横2倍になる現象の理由

dpi awareなimg CustomElementをつくるの話題が生まれる

将来的には冒頭図の右端の例のようにdpr=3になるデバイスも出てくる？

デバイスとDPR対応表 ( 調べ)