Window.devicePixelRatio

WindowプロパティのdevicePixelRatioは現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。 これは物理1ピクセルの大きさに対するCSS1ピクセルの大きさの比率と考えることもできます。もっと簡単に言うと、CSS上の1pxが物理ピクセルいくつで表示されているかという値です。

これは一般的なディスプレイと、HiDPI(高DPI)やRetinaのように同じ大きさのオブジェクトを描画するのにより多くのピクセルを使って鮮明さを得ているディスプレイとの差異を扱うのに便利です。

window.matchMedia() を使うと、devicePixelRatio の値の変化（例えば、ユーザーが異なるピクセル解像度の画面へウィンドウをドラッグした時など）を検知することができます。後述の例を参照して下さい。

value = window.devicePixelRatio;

倍精度浮動小数点の値であり、CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、2 であることは、HiDPI やレティナのディスプレイであると考えられます。それ以外の値が返されることもあり、それは一般的でない低解像度のディスプレイの場合や、より考えられるのはスクリーンが標準的な 96 または 76 DPI の解像度の単純な 2 倍よりも高いピクセル密度を持つ場合です。

レティナでは canvas がぼやけて見えることがあるでしょう。window.devicePixelRatioを使うことで、鮮明に表示するために必要なピクセル密度を調べます。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 表示サイズを設定(CSSにおけるピクセル数です)。
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// メモリ上における実際のサイズを設定(ピクセル密度の分だけ倍増させます)。
var scale = window.devicePixelRatio; // レティナでこの値を1にするとぼやけたcanvasになります
canvas.width = size * scale;
canvas.height = size * scale;

// CSS上のピクセル数を前提としているシステムに合わせます。
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = size / 2;
var y = size / 2;

var textString = "I love MDN";
ctx.fillText(textString, x, y);

この例では、devicePixelRatio の値をチェックして必要な変化に対処できるよう、メディアクエリを設定してデバイス解像度がいつ変化するかを監視します。

JavaScript

この JavaScript のコードは、デバイス解像度を監視するメディアクエリを作り、devicePixelRatio の値が変化したときはいつでもそれをチェックします。

let pixelRatioBox = document.querySelector(".pixel-ratio");
let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;

const updatePixelRatio = () => {
  let pr = window.devicePixelRatio;
  let prString = (pr * 100).toFixed(0);
  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
}

updatePixelRatio();

matchMedia(mqString).addEventListener("change", updatePixelRatio);

文字列 mqString は、メディアクエリそのものになるように作ります。このメディアクエリは、(resolution: 1dppx) (標準的なディスプレイの場合)、または (resolution: 2dppx) (HiDPI / レティナディスプレイの場合) のような内容で始まり、現在のディスプレイ解像度のピクセルあたりのドット数が特定の数であるかをチェックします。

関数 updatePixelRatio() は、現在の devicePixelRatio の値を取得し、pixelRatioBox 要素の innerText に、その比率を百分率と小数第 2 位までの未加工の 10 進数の値の両方で表示する文字列を設定します。

そして、関数 updatePixelRatio() が最初の値を表示するために一回実行され、その後メディアクエリが作られて updatePixelRatio() を change イベントのハンドラーとして登録するために addEventListener() が実行されます。

HTML

この HTML は、説明文を含むボックスと、現在のピクセル比率情報を表示する pixel-ratio ボックスを作成します。

<div class="container">
  <div class="inner-container">
    <p>この使用例により、ページをズームまたはズームアウトすること
       (または異なる表示倍率の画面にページを移動させること) の
       <code>Window.devicePixelRatio</code> プロパティに与える影響がわかります。
       どのようなことが起こるか、試してみましょう！</p>
  </div>
    <div class="pixel-ratio"></div>
</div>

body {
  font: 22px arial, sans-serif;
}

.container {
  top: 2em;
  width: 22em;
  height: 14em;
  border: 2px solid #22d;
  margin: 0 auto;
  padding: 0;
  background-color: #a9f;
}

.inner-container {
  padding: 1em 2em;
  text-align: justify;
  text-justify: auto;
}

.pixel-ratio {
  position: relative;
  margin: auto;
  height: 1.2em;
  text-align: right;
  bottom: 0;
  right: 1em;
  font-weight: bold;
}

結果

• メディアクエリ
• メディアクエリの使用
• CSS の resolution メディア特性
• PPK が行った devicePixelRatio に関する調査