Window.devicePixelRatio

WindowプロパティのdevicePixelRatioは現在のディスプレイの解像度に対する物理ピクセル数を返します。 これは物理ピクセルに対する、CSSにおけるピクセルの比率と考えることもできます。1以外の値であれば、CSSピクセル数を画面のピクセル数に置き換える必要があることを意味します。

これは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にすると、Retinaディスプレイではぼやけるようになります
canvas.width = size * scale;
canvas.height = size * scale;

// 座標系の正規化
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);

仕様

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

関連情報

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