Retina / HiDPIディスプレイの検出方法

Retinaディスプレイの検出

Retinaは、デバイスピクセル比が2以上の画面に対するAppleのブランド名です。メーカーに関係なく、すべての高DPI画面に同じ概念が適用されます。

JavaScript検出

最もシンプルなチェック：

const isRetina = window.devicePixelRatio >= 2;

より詳細な判定：

function getDisplayDensity() {
  const dpr = window.devicePixelRatio || 1;
  if (dpr >= 3) return 'ultra-high';
  if (dpr >= 2) return 'high';
  if (dpr >= 1.5) return 'mid';
  return 'standard';
}

CSSメディアクエリ検出

resolutionメディア機能を使用します：

@media (min-resolution: 2dppx) {
  .logo { background-image: url('logo@2x.png'); }
}

@media (-webkit-min-device-pixel-ratio: 2) {
  .logo { background-image: url('logo@2x.png'); }
}

DPR変更の監視

ユーザーが異なる密度のモニター間でウィンドウをドラッグするとDPRが変わる場合があります：

function watchDPR(callback) {
  const mql = window.matchMedia(
    '(resolution: ' + window.devicePixelRatio + 'dppx)'
  );
  mql.addEventListener('change', () => {
    callback(window.devicePixelRatio);
    watchDPR(callback);
  });
}

実用的な考慮事項

• DPR 1画面用のフォールバック画像を常に提供する
• 可能な場合はベクター形式（SVG）を使用してDPR固有のアセットを不要にする
• ブラウザDevToolsのデバイスエミュレーションで異なるDPR値をシミュレートしてテストする