↑

DOM

：

ドキュメント オブジェクト モデル

：

Window.devicePixelRatio プロパティ

　編集：2022.09.10 by T.A.

[Edge]。→mdn

現在のディスプレイ機器における CSS 解像度と物理解像度の比を返します。

これは 1 物理ピクセルの大きさに対する 1 CSS ピクセルの大きさの比率と考えることもできます。もっと簡単に言うと、 1 つの CSS ピクセルが実際にはいくつの物理ピクセルで表示されるかという値です。

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

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

構文
Window.devicePixelRatio
Window Window。実質 windowでしょう。
値

倍精度浮動小数点の値。CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。

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

例
<canvas> の解像度の補正

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

HTML： 

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

JavaScript： 

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

// 表示サイズを設定（CSS におけるピクセル数です）。
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

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

const x = size / 2;
const y = size / 2;

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

¶省く 

D=window.devicePixelRatio; //＝1

ブラウザー表示を拡縮してみると変化があります。

テスト
HTML：


ここにHTMLが表示される
⯈スクリプト組み込み：
JavaScript：


JavaScript：



表示内容：
表示内容：