你了解手机设备的dpr吗？它和CSS又有什么联系？

当我们在前端开发中涉及到devicePixelRatio时，我们实际上在谈论屏幕像素密度，即每英寸的像素数。这个属性告诉我们在一个设备上的一个CSS像素对应多少物理像素。

目录

知识点概览

dpr值的计算

dpr的用处

---

知识点概览

 比如我们新买了一个手机，看一下分辨率，它所指的是设备上有多少个能够显示一种特定颜色的最小区域，不管打开哪个网站，这部手机的物理像素是不会变的。

dpr值的计算

那么dpr的实际意义就是，我们可以知道，每个css像素实际上，在一台设备上，精确的说是设备的横坐标或者纵坐标上（横竖两个方向），会被多少实际的物理像素来显示。

当我们在屏幕上做缩放操作的时候，比如某些图片需要放大一些，两根手指执行放大操作，或者缩小一些等这些操作，很明显设备像素和css像素就不匹配了，如果用户执行了放大操作，那么dpr的值就会大于1。

由上可见，dpr = 设备像素 / CSS像素

dpr的用处

devicePixelRatio的值通常是一个浮点数，表示设备上的物理像素与CSS像素的比率。例如：

• devicePixelRatio为1表示每个CSS像素对应一个物理像素，通常用于标准分辨率的屏幕。
• devicePixelRatio为2表示每个CSS像素对应四个物理像素（2x2的像素矩阵），通常用于高分辨率的屏幕（Retina显示屏等）。

在响应式网页设计中，了解devicePixelRatio可以帮助我们提供适合不同设备屏幕密度的图像和样式。例如，我们可以根据devicePixelRatio选择加载不同分辨率的图像，以确保在高分辨率屏幕上显示清晰度。此外，了解devicePixelRatio还可以帮助我们优化网页性能，例如减少在高分辨率屏幕上不必要的图形渲染，从而提高用户体验。

在JavaScript中，你可以通过window.devicePixelRatio来访问devicePixelRatio属性，从而在运行时获取设备的像素比率。

现在许多设备，特别是高分辨率的移动设备（如智能手机、平板电脑和笔记本电脑），都具有高像素密度的屏幕。这种高像素密度意味着相同物理尺寸的屏幕上包含了更多的像素，使得显示更加细腻和清晰。