devicePixelRatio 和 dppx 有什么不同？答案

【问题标题】：what is different between devicePixelRatio and dppx?devicePixelRatio 和 dppx 有什么不同？
【发布时间】：2015-11-04 11:11:24
【问题描述】：

我对@987654323@和dppx做了一些研究：

deicePixelRatio：返回当前显示设备上一个物理像素的（垂直）大小与一个CSS像素大小的比值。

dppx：每“像素”单位的点数。

我认为它们只是一回事，但我不确定，对吗？

【问题讨论】：

【解决方案1】：

在 Web 开发领域，设备像素比（也称为 CSS 像素比，也称为 dppx）决定了 CSS 如何解释设备的屏幕分辨率。

CSS 通过以下公式解释设备的分辨率：device_resolution/css_pixel_ratio。例如：

三星 Galaxy S III

实际分辨率：720 x 1280 CSS像素比：2 解释分辨率：(720/2) x (1280/2) = 360 x 640

在查看网页时，CSS 会认为设备具有 360x640 分辨率的屏幕，媒体查询会像屏幕是 360x640 一样做出响应。但是屏幕上渲染的元素将是实际 360x640 屏幕的两倍。

其他一些例子：

三星 Galaxy S4

实际分辨率：1080 x 1920 CSS像素比：3 解析分辨率：(1080/3) x (1920/3) = 360 x 640

iPhone 5s

实际分辨率：640 x 1136 CSS像素比：2 解析分辨率：(640/2) x (1136/2) = 320 x 568

创建 CSS 像素比的原因是因为随着手机屏幕分辨率的提高，如果每个设备的 CSS 像素比仍然为 1，那么网页会呈现得太小而无法看到。典型的全屏桌面显示器是 1920x1080 的 24 英寸显示器。想象一下，如果该显示器缩小到

这是一个工具，它还可以告诉您当前设备的像素密度：

这是一个可搜索的设备像素比率列表（如果您有设备要添加到此列表中，它们会通过 GitHub 接受拉取请求）

【讨论】：

【解决方案2】：

不，这不是一回事。 Qmaster完美地解释了设备像素比的概念，因此无需添加任何其他内容。

屏幕（或打印机）的点密度是每单位长度可以显示的点数（像素）（实际上相当于我们当前固定点数屏幕世界中的“具有”）。 CSS 有两个单位来表达这个量级：

创建 CSS 时，CRT 显示器统治着世界，它们的点密度通常在 96dpi 左右。其实按照CSS3对像素的定义是：

参考像素是像素密度为 96dpi 且距离阅读器一臂远的设备上一个像素的视角。对于 28 英寸的标称臂长，因此视角约为 0.0213 度。对于在手臂长度上阅读，1px 因此对应于大约 0.26 毫米（1/96 英寸）。Link。

dppx 是 96dpi 屏幕中的像素密度。数学表达：

1dppx = 96dpi

例如，如果您的 15 英寸笔记本电脑的像素密度为 146.9dpi，则完全等同于说它的像素密度为 1.53dppx (1.53=146.9/96)。

【讨论】：

在 CSS 媒体查询的世界中，它们是相同的。例如，三星 Galaxy S5 的 dpi 密度为 432，根据您的公式，它可以得到 432/96 = 4.5dppx，但如果您在 Galaxy S5 上的 chrome 开发工具中测试媒体查询： mediaQuery = "(min-resolution: 3.1dppx)"; window.matchMedia(mediaQuery).matches - 你会得到错误的。但你会得到正确的 mediaQuery = "(min-resolution: 3.0dppx)";这意味着浏览器将 devicePixelRatio 和 dppx 视为同一事物，因为 Galaxy S5 的 devicePixelRatio = 3
这个答案不正确。 dppx 和 devicePixelDensity 都与屏幕 dpi/ppi 无关。它们从操作系统中获得价值，并且始终保持不变。 DPI versus PPI versus DPPX

【解决方案3】：

devicePixelRatio 和 dppx 完全相同。前者是从 Javascript 中调用的，后者是在 CSS 中使用的。

浏览器从操作系统请求这个值。操作系统在其显示模式中定义此值。典型值为：@1x、@2x、@3x、@1.5x。

通过这个值，例如@2x，操作系统向应用程序（浏览器等）提示在当前显示模式下，一个逻辑像素等于两个物理像素（从技术上讲，可能是也可能不是），因此，浏览器（引擎）将使用双重维度的媒体来实现最高质量。这是由浏览器引擎完成的，而不是我们。

【讨论】：