Window.devicePixelRatio

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

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

この値が変更(ユーザが異なるピクセル密度のディスプレイにウィンドウをドラッグしたときなどに発生します)されたときに通知を受ける方法はありません。そうしたイベントやコールバックが存在しないためです。唯一の方法は devicePixelRatio の値を定期的にチェックすることですが、あまりにも頻繁すぎるチェックはパフォーマンスに影響するので気を付けましょう。

構文

value = window.devicePixelRatio;

値

浮動小数点数(double)

例

レティナでは 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);

仕様

ブラウザ実装状況

関連情報

• CSS resolution media query
• PPK made some research on devicePixelRatio