この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

仕様

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

ブラウザ実装状況

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

関連情報

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

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