WHAT - 屏幕 dpr 设备像素比率

一、设备像素比率 (DPR)

DPR（设备像素比率）常常在讨论屏幕分辨率和显示质量时使用。

设备像素比率（DPR, Device Pixel Ratio）表示物理像素（device pixels）与 CSS 像素（CSS pixels）之间的比例。它反映了设备的屏幕密度，通常用来调整网页元素在高分辨率屏幕上的显示效果。

物理像素：屏幕上实际存在的像素点。
CSS 像素：网页设计中使用的抽象单位，通常与逻辑像素相关。

在高 DPI 设备上，DPR 通常大于 1。例如：

在常规 96 DPI 显示器上，DPR 为 1。
在 Retina 显示器上，DPR 可能为 2 或更高。

你可以使用以下 JavaScript 代码获取设备像素比率：

var dpr = window.devicePixelRatio || 1;
console.log("Device Pixel Ratio: " + dpr);

二、DPR 与每英寸点数 (DPI)

每英寸点数（DPI, Dots Per Inch）表示每英寸内有多少个像素点，是衡量屏幕分辨率的一个物理指标。DPI 越高，图像越清晰，细节越丰富。

计算 DPI 的方法需要知道屏幕的物理尺寸和分辨率：

屏幕分辨率：屏幕的宽度和高度（以像素为单位）。
屏幕尺寸：屏幕的对角线长度（以英寸为单位）。

计算公式为：

请添加图片描述

以下是一个完整的 JavaScript 示例代码，用于获取设备像素比率和估算屏幕的 DPI：

// 获取屏幕的宽度和高度（以像素为单位）
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;// 获取设备像素比率
var devicePixelRatio = window.devicePixelRatio || 1;// 获取调整后的屏幕宽度和高度（考虑 DPR）
var adjustedScreenWidth = screenWidth * devicePixelRatio;
var adjustedScreenHeight = screenHeight * devicePixelRatio;// 假设的屏幕对角线尺寸（以英寸为单位）
var diagonalSizeInInches = 15; // 你需要根据实际情况调整这个值// 计算 DPI
var dpi = Math.sqrt(Math.pow(adjustedScreenWidth, 2) + Math.pow(adjustedScreenHeight, 2)) / diagonalSizeInInches;console.log("Screen Width: " + screenWidth + "px");
console.log("Screen Height: " + screenHeight + "px");
console.log("Device Pixel Ratio: " + devicePixelRatio);
console.log("Adjusted Screen Width: " + adjustedScreenWidth + "px");
console.log("Adjusted Screen Height: " + adjustedScreenHeight + "px");
console.log("Estimated DPI: " + dpi);

注意事项

diagonalSizeInInches 是屏幕对角线尺寸，你需要根据你的显示器的实际尺寸来调整这个值。
估算的 DPI 仅是一个近似值，实际 DPI 可能会有所不同。

三、dpr=2 和 dpr=1 有什么区别

我们日常设备，一般 Mac 显示器 dpr 为 2，外置显示器 dpr 为 1，那他们有什么区别？

设备像素比率（DPR, Device Pixel Ratio）为 2 和 1 之间的主要区别在于屏幕上显示内容的清晰度和缩放方式。

以下是具体区别：

设备像素比率为 1 (DPR = 1)

物理像素与 CSS 像素：1 个 CSS 像素等于 1 个物理像素。
显示效果：适用于标准分辨率显示器，如大多数非 Retina 显示器或传统显示器。
图像与文本：图像和文本的大小与在网页设计中定义的尺寸一致，不会进行额外缩放。

设备像素比率为 2 (DPR = 2)

物理像素与 CSS 像素：1 个 CSS 像素等于 2 个物理像素。
显示效果：适用于高分辨率显示器，如 Retina 显示器或高 DPI 显示器。
图像与文本：图像和文本的大小会按比例缩小，因为一个 CSS 像素实际由 2x2（共 4 个）物理像素表示。显示内容更清晰细腻。

实际区别

清晰度：
- DPR = 1：图像和文本可能会在高分辨率设备上显得模糊，因为每个 CSS 像素只对应一个物理像素。
- DPR = 2：图像和文本在高分辨率设备上更加清晰，因为每个 CSS 像素对应四个物理像素。
资源加载：
- DPR = 1：加载标准分辨率的图像资源，文件大小较小。
- DPR = 2：通常需要加载高分辨率的图像资源（如 2x 图像），以确保显示效果清晰。这会增加文件大小和加载时间。
网页设计与开发：
- DPR = 1：开发者设计的所有尺寸和布局在显示器上直接按比例展示，无需额外考虑高分辨率问题。
- DPR = 2：开发者需要为高分辨率设备提供更高质量的图像资源，并考虑在不同 DPI 设置下的显示效果。

示例代码

以下是一个简单的 JavaScript 示例，演示如何检测和处理不同的设备像素比率：

// 获取设备像素比率
var dpr = window.devicePixelRatio || 1;if (dpr === 1) {console.log("DPR is 1: Standard resolution display.");
} else if (dpr === 2) {console.log("DPR is 2: High resolution (Retina) display.");
} else {console.log("DPR is " + dpr + ": Other resolution display.");
}// 根据 DPR 选择不同的图像资源
var imageUrl = dpr > 1 ? "image@2x.png" : "image.png";
document.getElementById("myImage").src = imageUrl;