Window.devicePixelRatio

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Window 接口的 devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率:一个 CSS 像素的大小与一个物理像素的大小。简单来说,它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

当处理标准显示器与 HiDPI 或 Retina 显示器之间的差异时,这很有用,后者使用更多的屏幕像素绘制相同的对象,从而获得更清晰的图像。

你可以使用window.matchMedia() 检查devicePixelRatio的值是否发生更改(例如,如果用户将窗口拖动到带有 不同的像素密度)。请参阅下面的例子

语法

value = window.devicePixelRatio;

一个双精度浮点值,指示显示器的物理像素分辨率与 CSS 像素分辨率之比。值 1 表示经典 96 DPI(在某些平台上为 76 DPI)显示,而对于 HiDPI / Retina 显示屏则期望值为 2。在异常低分辨率的显示器中,或更常见的是,当屏幕的像素深度比简单地将 96 或 76 DPI 的标准分辨率提高一倍时,可能还会返回其他值。

示例

<canvas> 中更正分辨率

<canvas>可能在视网膜屏幕上显得太模糊。使用window.devicePixelRatio确定应添加多少额外的像素密度以使图像更清晰。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

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

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

监视屏幕分辨率或缩放级别的更改

在此示例中,我们将设置一个媒体查询并观看它以查看设备分辨率何时更改,以便我们可以检查devicePixelRatio的值来处理所需的任何更新。

JavaScript

JavaScript 代码创建媒体查询,以监控设备分辨率并在每次更改时检查devicePixelRatio的值。

js
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).addEventListener("change", updatePixelRatio);

字符串mqString设置为媒体查询本身。媒体查询以(resolution: 1dppx)(对于标准显示)或(resolution: 2dppx)(对于 Retina / HiDPI 显示)开始,检查当前显示分辨率是否与每个像素px的实际设备像素点匹配。

updatePixelRatio()函数获取devicePixelRatio的当前值,然后将pixelRatioBoxinnerText设置为一个字符串,该字符串同时显示百分比和原始十进制值比率,最多两位小数。

然后,调用updatePixelRatio()函数一次以显示起始值,然后使用matchMedia()addEventListener()来将updatePixelRatio()设置为change事件的处理程序。

HTML

HTML 将创建包含说明的框和将显示当前像素比率信息的pixel-ratio 框。

html
<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>

CSS

css
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;
}

结果

规范

Specification
CSSOM View Module
# dom-window-devicepixelratio

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
devicePixelRatio

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

参见