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);

This image describe the impact of different value on retina display.

仕様

仕様 状況 コメント
CSS Object Model (CSSOM) View Module
Window.devicePixelRatio の定義
草案 初期定義

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (有) (有) 49 11 41 9.1
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (有) (有) (有) ? ? all 9.3

関連情報

ドキュメントのタグと貢献者

このページの貢献者: beicun, woodmix, TNKSoftware
最終更新者: beicun,