デバイスピクセル比（DPR）の解説

デバイスピクセル比とは？

デバイスピクセル比（DPR）は、ディスプレイの物理ピクセルとWebレイアウトで使用されるCSSピクセルの比率です。JavaScriptではwindow.devicePixelRatioで取得できます。

一般的なDPR値

DPR	意味	デバイス例
1	標準密度	古いデスクトップ、非Retinaモニター
1.5	中密度	一部のAndroidスマートフォン、150%スケーリングのWindowsノートPC
2	高密度（Retina）	MacBook Pro、iPhone、iPad
3	超高密度	iPhone Plus/Pro Max、フラグシップAndroid

DPRがWeb開発に与える影響

DPRが2の場合、各CSSピクセルは2×2の物理ピクセルグリッドでレンダリングされます。つまり、100×100 CSSピクセルの要素は実際には200×200の物理ピクセルを占有します。100px幅の画像を提供すると、ブラウザがアップスケールしてぼやけます。

高DPI画像の対応

srcset属性を使用して複数の解像度の画像を提供します：

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 1x, photo-800.jpg 2x, photo-1200.jpg 3x"
  alt="サンプル写真"
/>

高DPI画面でのCanvas描画

<canvas>に描画する際は、CanvasバッファとCSSサイズの両方をスケーリングします：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.width = 300 * dpr;
canvas.height = 150 * dpr;
canvas.style.width = '300px';
canvas.style.height = '150px';
ctx.scale(dpr, dpr);

これにより、Retinaおよび高DPI画面でシャープな描画が保証されます。