设备像素比例到底是多少？

Z时代
2024-01-10
分类：问答

关于移动网络的每篇文章都提到了这一点，但是我找不到任何地方可以确切解释此属性的确切含义。

任何人都可以详细说明这种查询会检查什么吗？

@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
}

回答：

简短答案

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

物理分辨率：960 x 640

逻辑分辨率：480 x 320

公式为：

$linres_p / linres_l$

哪里：

$linres_p$ 是

和：

$linres_l$ 是逻辑

其他设备报告的设备像素比率不同，包括非整数。例如，诺基亚Lumia 1020报告为1.6667，Samsumg Galaxy S4报告为3，苹果iPhone

6 Plus报告为2.46 （来源：

dpilove）。但这在原则上不会改变任何内容，因为您永远不应该为任何一种特定的设备进行设计。

讨论区

CSS“像素”甚至没有定义为“某个屏幕上的一个像素”，而是定义为视角

，在手臂长度处 $0.0213°$ 大约 $1/96$ 为一英寸。

对于网页设计，这具有很多含义，例如准备高清图像资源并以不同的设备像素比率仔细应用不同的图像。您不想强迫低端设备下载高分辨率的图像，而只是在本地进行缩小。您也不想让高端设备升级低分辨率图像以获得模糊的用户体验。

如果您坚持使用位图图像，以适应许多不同的设备像素比率，则应使用CSSMediaQueries为不同的设备组提供不同的资源集。结合使用一些不错的技巧，例如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'); }
}

这样，每种设备类型仅加载正确的图像资源。另外请记住，pxCSS 中的单位在。

矢量图形的情况

随着越来越多的设备类型出现，为所有设备提供足够的位图资源变得更加棘手。在CSS中，媒体查询是目前的唯一方法，而在HTML5中，图片元素可让您对不同的媒体查询使用不同的来源，但是这种支持仍然不是100％，因为大多数Web开发人员仍然需要一段时间才能支持IE11

如果您需要图标，线条艺术，设计元素的清晰图像，需要开始考虑SVG，它可以完美地缩放到所有分辨率。

设备像素比例到底是多少？

回答：

简短答案

讨论区

回答：

矢量图形的情况

其他人也看了：