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;
例子
假设一个图像的 CSS 尺寸是 100x100 像素：
- DPR = 1：显示的图像大小为 100x100 个物理像素。
- DPR = 2：显示的图像大小为 200x200 个物理像素，但在 CSS 中仍然显示为 100x100 像素，这使得图像更加清晰。
通过理解和应用这些区别，可以优化网页在不同设备上的显示效果，确保用户体验的一致性和清晰度。
原文地址：https://blog.csdn.net/weixin_58540586/article/details/140638006
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！