We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

概述

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

浏览器兼容性

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!

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,