Retinaおよび高DPIディスプレイの検出

Retina / 高DPIディスプレイの検出

resolution（およびレガシーの-webkit-min-device-pixel-ratio）メディア機能は、高いピクセル密度のディスプレイを検出します。

クエリ

@media (min-resolution: 2dppx) {
  /* 高DPIスタイル */
}

高DPIで調整すべき点

1. 画像 -- ぼやけを避けるため2x解像度の画像を配信
2. ボーダー -- Retinaディスプレイでは細いボーダー（1px）が太く見える場合があるので0.5pxを使用
3. アイコン -- 可能な限りSVGを使用

モダンな代替手段: srcset

<img>要素には、メディアクエリよりもsrcset属性の方がより良いアプローチです。