设备的 DPR 是否可变

问题

一台设备的 DPR（devicePixelRatio）是否是可变的？

解答

什么是 DPR

devicePixelRatio（设备像素比）是 window 对象下的一个属性，它的计算公式为：

dpr = 设备像素 / CSS像素

设备像素（也称物理像素）：指设备上能够显示特定颜色的最小区域数量，比如手机的 1920×1080 或 1280×720 分辨率。这个数值在设备出厂后是固定不变的。

CSS像素（也称独立像素 DIPs）：是为 Web 开发者提供的抽象单位，我们在 CSS 中使用的 width: 100px、font-size: 16px 等都是 CSS 像素。

DPR 的含义

DPR 表示在一个设备上，每个 CSS 像素会被多少个实际的物理像素来显示。

以图示说明：

• dpr < 1：一个设备像素覆盖多个 CSS 像素，对应用户的缩小操作
• dpr > 1：一个CSS像素覆盖多个设备像素，对应用户的放大操作

DPR 是否可变

答案是：可变的。

虽然设备的物理像素是固定的，但用户的缩放操作会改变 CSS 像素的大小，从而改变 DPR 的值。

通常所说的”设备 DPR”是指在默认缩放（100%）情况下的值。可以通过 JavaScript 获取：

console.log(window.devicePixelRatio); // 例如：2

关键点

• 设备像素（物理像素）是固定的，由硬件决定
• CSS 像素是抽象单位，会随用户缩放而变化
• DPR 会因用户缩放操作而改变
• 通常说的设备 DPR 指默认缩放 100% 时的值
• 前端开发中主要使用 CSS 像素，设备像素很少直接使用