MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

此属性返回当前显示设备的物理像素分辨率与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);

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

说明

说明 状态 描述
CSS Object Model (CSSOM) View Module
Window.devicePixelRatio
Working Draft Initial definition

浏览器兼容性

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

参见

文档标签和贡献者

 此页面的贡献者: Jic1993, zhanghbin, blue0125, Jiang-Xuan
 最后编辑者: Jic1993,