Window.devicePixelRatio

概述

此属性返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例：即一个CSS像素的大小相对于一个物理像素的大小的比值。

这个值的改变不会触发任何回调函数或者被其他事件监听（例如，如果你拖动窗口使其在不同屏幕密度的显示器上显示）

语法

可以通过重写 window.devicePixelRatio来更改此属性 (例如, window.devicePixelRatio = 2)

value = window.devicePixelRatio;

例子

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

var canvasSize = 200;

//overriding default window.devicePixelRatio, changing it to 2 on retina display will make canvas clear
window.devicePixelRatio = 1;

canvas.width = canvas.height = canvasSize;

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = canvasSize / 2;
var y = canvasSize / 2;

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

说明

浏览器兼容性

参见

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