物理ピクセル (device pixel)と論理ピクセル (CSS pixel) の比率

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

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

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

CSSで1pxで指定すると、実際には4pxを使って表示される

見た目的に大きさの差異はない #??

きめ細やかになる

関係

CSS pixel * Device Pixel Ratio = device pixel

以前はdevice pixelとCSS pixelは一致していた

しかし、Retinaに始まり違う数のも出てきたので分けて考える必要が出てきた

何が嬉しくてdpr=2にした？

これはCSSが1pxが定義されたよりも、あとにdpr=2できる技術ができたからこんなことになった？

CSSを実装時に何を気をつければいい？

next/legacy/imageではどのサイズを指定すればいい？

どうやって調べる？

その画像がある時に、どこを見ればCSS pixelがわかる？

device pixelかDevice Pixel RatioはJSで取ってこれる？

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

なんでこれ？

キャプチャの表示がややこしすぎない？