设备像素比究竟是什么？

Question

这是关于移动网络的每篇文章都提到的，但我无处可以找到这个属性的确切含义的解释 任何人都可以详细说明这样的查询是什么？

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

Answer 1

设备像素比率== CSS像素比率

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

浏览器的CSS通过以下公式计算设备的逻辑（或解释）分辨率：

例如：

Apple iPhone 6s

• 实际分辨率：750 x 1334
• CSS像素比率：2
• 逻辑分辨率：

查看网页时， CSS会认为该设备具有375x667分辨率屏幕，媒体查询将响应，就像屏幕是375x667 一样。但是屏幕上渲染的元素将是实际375x667屏幕的两倍，因为物理屏幕中的物理像素数量是原来的两倍。

其他一些例子：

三星Galaxy S4

• 实际分辨率：1080 x 1920
• CSS像素比率：3
• 逻辑分辨率：

iPhone 5s

• 实际分辨率：640 x 1136
• CSS像素比率：2
• 逻辑分辨率：

为什么存在设备像素比？

创建CSS像素比率的原因是因为随着手机屏幕获得更高的分辨率，如果每个设备的CSS像素比率仍然为1，那么网页的渲染量太小而无法看到。

典型的全屏桌面显示器大约24英寸，分辨率为1920x1080。想象一下，如果显示器缩小到大约5英寸，但具有相同的分辨率。在屏幕上查看内容是不可能的，因为它们会非常小。但制造商现在一直推出1920x1080分辨率的手机屏幕。

因此，设备像素比率是由手机制造商发明的，因此它们可以继续推动手机屏幕的分辨率，清晰度和质量，而不会使屏幕上的元素太小而无法看到或读取。

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

http://bjango.com/articles/min-device-pixel-ratio/

Answer 2

简短回答

设备像素比是物理像素和逻辑像素之间的比率。例如，iPhone 4和iPhone 4S报告设备像素比为2，因为物理线性分辨率是逻辑线性分辨率的两倍。

• 物理分辨率：960 x 640
• 逻辑分辨率：480 x 320

公式为：

其中：

是物理线性分辨率

和

是逻辑线性分辨率

其他设备报告不同的设备像素比率，包括非整数像素比率。例如，诺基亚Lumia 1020报告1.6667，Samsumg Galaxy S4报告3，Apple iPhone 6 Plus报告2.46 （来源：dpilove）。但这并没有改变任何原则，因为你不应该为任何一个特定的设备设计。

讨论

CSS“像素”甚至没有定义为“某个屏幕上的一个图像元素”，而是定义为视角的非线性角度测量 一英寸的手臂长度。 来源：CSS Absolute Lengths

在网页设计方面，这有很多含义，例如准备高清图像资源，并以不同的设备像素比率仔细应用不同的图像。您不希望强制低端设备下载非常高分辨率的图像，只能在本地缩小图像。您也不希望高端设备升级低分辨率图像以获得模糊的用户体验。

如果您遇到位图图像，为了适应许多不同的设备像素比率，您应该使用CSS Media Queries为不同的设备组提供不同的资源集。将此与background-size: cover等好的技巧相结合，或者将background-size明确设置为百分比值。

实施例

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

这样，每种设备类型只加载正确的图像资源。另请注意，CSS 始终中的px单位对逻辑像素进行操作。

矢量图形

的情况

随着越来越多的设备类型出现，为它们提供足够的位图资源变得更加棘手。在CSS中，媒体查询是目前唯一的方式，在HTML5中，picture element允许您为不同的媒体查询使用不同的来源，但是支持仍然不是100％，因为大多数Web开发人员仍然需要支持IE11而更多（来源：caniuse）。

如果您需要图标，线条艺术，不是照片的设计元素的清晰图像，您需要开始考虑SVG，它可以精确地扩展到所有分辨率。

Answer 3

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

  

<强> -moz设备象素比率
  给出每个CSS像素的设备像素数。

这几乎是自我解释的。该数字描述了“真实”像素（屏幕的物理像素）用于显示一个“虚拟”像素（CSS中设置的大小）的比率。

Answer 4

Boris Smus的文章High DPI Images for Variable Pixel Densities对设备像素比率有更准确的定义：每个CSS像素的设备像素数量是一个很好的近似值，但不是整个故事。

请注意，您可以使用window.devicePixelRatio设备使用DPR。

Answer 5

设备像素比与设备的像素密度直接相关。

我能找到的最简洁的描述：

<块引用>

DPR 的目的是保持 CSS 像素大小一致，因此 字母、符号、图像和其他所有内容的大小一致 屏幕，跨具有不同物理像素的各种设备 密度。

来源：screenresolutiontest