{{APIRef}}
{{domxref("Window")}} 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。
您可以使用{{domxref("Window.matchMedia", "window.matchMedia()")}} 检查devicePixelRatio的值是否发生更改（例如，如果用户将窗口拖动到带有 不同的像素密度）。 请参阅{{anch("Monitoring screen resolution or zoom level changes", "下面的例子")}}.。
value = window.devicePixelRatio;
一个双精度浮点值，指示显示器的物理像素分辨率与CSS像素分辨率之比。 值1表示经典96 DPI（在某些平台上为76 DPI）显示，而对于HiDPI / Retina显示屏则期望值为2。 在异常低分辨率的显示器中，或更常见的是，当屏幕的像素深度比简单地将96或76 DPI的标准分辨率提高一倍时，可能还会返回其他值。
<canvas> 中更正分辨率{{htmlelement("canvas")}}可能在视网膜屏幕上显得太模糊。 使用window.devicePixelRatio确定应添加多少额外的像素密度以使图像更清晰。
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Set display size (css pixels).
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";
// Set actual size in memory (scaled to account for extra pixel density).
var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
// Normalize coordinate system to use css pixels.
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);
在此示例中，我们将设置一个媒体查询并观看它以查看设备分辨率何时更改，以便我们可以检查devicePixelRatio的值来处理所需的任何更新。
JavaScript代码创建媒体查询，以监控设备分辨率并在每次更改时检查devicePixelRatio的值。
let pixelRatioBox = document.querySelector(".pixel-ratio");
let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
const updatePixelRatio = () => {
let pr = window.devicePixelRatio;
let prString = (pr * 100).toFixed(0);
pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
}
updatePixelRatio();
matchMedia(mqString).addListener(updatePixelRatio);
字符串mqString设置为媒体查询本身。 媒体查询以(resolution: 1dppx)（对于标准显示）或(resolution: 2dppx)（对于Retina / HiDPI显示）开始，检查当前显示分辨率是否与每个像素px的实际设备像素点匹配。
updatePixelRatio()函数获取devicePixelRatio的当前值，然后将pixelRatioBox的 {{domxref("HTMLElement.innerText", "innerText")}}设置为一个字符串，该字符串同时显示百分比和原始十进制值比率，最多两位小数。
然后，调用updatePixelRatio()函数一次以显示起始值，然后使用{{domxref("Window.matchMedia", "matchMedia()")}} 和 {{domxref("EventTarget.addEventListener", "addEventListener()")}}来将updatePixelRatio()设置为change事件的处理程序。
HTML将创建包含说明的框和将显示当前像素比率信息的pixel-ratio 框。
<div class="container">
<div class="inner-container">
<p>This example demonstrates the effect of zooming the page in
and out (or moving it to a screen with a different scaling
factor) on the value of the property <code>Window.devicePixelRatio</code>.
Try it and watch what happens!</p>
</div>
<div class="pixel-ratio"></div>
</div>
body {
font: 22px arial, sans-serif;
}
.container {
top: 2em;
width: 22em;
height: 14em;
border: 2px solid #22d;
margin: 0 auto;
padding: 0;
background-color: #a9f;
}
.inner-container {
padding: 1em 2em;
text-align: justify;
text-justify: auto;
}
.pixel-ratio {
position: relative;
margin: auto;
height: 1.2em;
text-align: right;
bottom: 0;
right: 1em;
font-weight: bold;
}
{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}
| Specification | Status | Comment |
|---|---|---|
| {{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}} | {{Spec2("CSSOM View")}} | Initial definition |
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
{{Compat("api.Window.devicePixelRatio")}}