HTML DOM 窗口 devicePixelRatio 属性

HTML DOM (Document Object Model) 是一种程序接口，可以对 HTML 和 XML 文档进行编程。其中，window 对象是 DOM 的最高级别之一，表示整个浏览器窗口。其中有一个 devicePixelRatio 属性，它表示物理像素和设备独立像素之间的比例。

什么是物理像素和设备独立像素？

在 Web 开发中，我们经常听到“物理像素”和“设备独立像素”的概念，这两者有何区别？

• 物理像素是屏幕上显示的最小单位，也称实际像素或硬件像素。屏幕分辨率越高，单个物理像素就越小，这样屏幕就会显得更加清晰细腻。

• 设备独立像素（DIP）是一个抽象的概念，它与物理像素之间存在着比例关系。DIP 在不同的设备上具有相同的大小，在 CSS 布局中被用作基本单位。也称逻辑像素或虚拟像素。

为什么要使用设备独立像素？因为不同的设备可能会有不同的像素密度，同样的尺寸在不同的设备上会有不同的表现。以 iPhone 6 和 iPhone 6 Plus 为例，它们的分辨率分别为 750x1334 和 1080x1920，并不相同，但它们的设备独立像素是相同的。

devicePixelRatio 属性简介

devicePixelRatio 是 window 对象的一个属性，它表示物理像素和设备独立像素之间的比例。例如，如果物理像素是 200x200，而设备独立像素是 100x100，那么 devicePixelRatio 的值就是 2，也就是物理像素是设备独立像素的两倍。

通过以下代码可以获取 devicePixelRatio 的值：

let dpr = window.devicePixelRatio;
console.log(dpr);

在不同的设备上运行，就可以得到不同的结果。例如在 MacBook Pro 上，dpr 的值通常为 1，而在 iPhone 6 上，dpr 的值通常为 2 或 3。

devicePixelRatio 的应用场景

• 针对高清屏的适配：如果我们开发的 Web 应用要在各种不同的设备上运行，而且要保证在高清屏上的显示效果优秀，那么就可以使用 devicePixelRatio 进行适配。通过检查设备的 dpr 值，设置不同的样式或图片大小，就可以达到更好的显示效果。

• 确定视网膜屏幕：视网膜屏幕的设备独立像素是普通屏幕的两倍，因此它们的 dpr 值也是 2。我们可以利用这一特性，通过检测 dpr 值，来确定用户是否使用视网膜屏幕，然后使用相应的高清图像或样式。

总结

devicePixelRatio 是表示物理像素和设备独立像素之间比例的属性，我们可以通过它来适配高清屏、检测视网膜屏幕等。该属性在 Web 开发中有着广泛的应用场景，掌握它的使用方法无疑是我们的必修课之一。