CSS 设备像素比究竟是什么？

what exactly is device pixel ratio?

提问by ilyo

this is mentioned every article about mobile web, but nowhere I can found an explanation of what exactly does this attribute measure.
Can anyone please elaborate what does queries like this check?

每一篇关于移动网络的文章都提到了这一点，但我找不到任何关于这个属性测量究竟是什么的解释。
任何人都可以请详细说明像这样的查询检查什么？

@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

}

采纳答案by Anders Tornblad

Short answer

简答

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

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

• Physical resolution: 960 x 640
• Logical resolution: 480 x 320

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

The formula is:

公式为：

Where:

在哪里：

is the physical linear resolution

是物理线性分辨率

and:

和：

is the logical linear resolution

是逻辑线性分辨率

Other devices report different device pixel ratios, including non-integer ones. For example, the Nokia Lumia 1020 reports 1.6667, the Samsumg Galaxy S4 reports 3, and the Apple iPhone 6 Plus reports 2.46 (source: dpilove). But this does not change anything in principle, as you should never design for any one specific device.

其他设备报告不同的设备像素比率，包括非整数。例如，诺基亚 Lumia 1020 报告 1.6667，三星 Galaxy S4 报告 3，苹果 iPhone 6 Plus 报告 2.46 （来源：dpilove）。但这在原则上不会改变任何事情，因为您永远不应该为任何特定设备设计。

Discussion

讨论

The CSS "pixel" is not even defined as "one picture element on some screen", but rather as a non-linear angular measurementof viewing angle, which is approximately of an inch at arm's length. Source: CSS Absolute Lengths

CSS“像素”甚至不被定义为“某个屏幕上的一个图片元素”，而是作为视角的非线性角度测量，大约为一英寸的手臂长度。来源：CSS 绝对长度

This has lots of implications when it comes to web design, such as preparing high-definition image resources and carefully applying different images at different device pixel ratios. You wouldn't want to force a low-end device to download a very high resolution image, only to downscale it locally. You also don't want high-end devices to upscale low resolution images for a blurry user experience.

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

If you are stuck with bitmap images, to accommodate for many different device pixel ratios, you should use CSS Media Queriesto provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: coveror explicitly set the background-sizeto percentage values.

如果您坚持使用位图图像，为了适应许多不同的设备像素比，您应该使用CSS 媒体查询为不同的设备组提供不同的资源集。将此与不错的技巧相结合，例如background-size: cover或明确设置background-size百分比值。

Example

例子

#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'); }
}

This way, each device type only loads the correct image resource. Also keep in mind that the pxunit in CSS alwaysoperates on logical pixels.

这样，每种设备类型只加载正确的图像资源。还要记住，pxCSS中的单位总是对逻辑像素进行操作。

A case for vector graphics

矢量图形的一个案例

As more and more device types appear, it gets trickier to provide all of them with adequate bitmap resources. In CSS, media queries is currently the only way, and in HTML5, the picture elementlets you use different sources for different media queries, but the support is still not 100 % since most web developers still have to support IE11 for a while more (source: caniuse).

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

If you need crisp images for icons, line-art, design elements that are not photos, you need to start thinking about SVG, which scales beautifully to all resolutions.

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

回答by Jake Wilson

Device Pixel Ratio == CSS Pixel Ratio

设备像素比 == CSS 像素比

In the world of web development, the device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.

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

A browser's CSS calculates a device's logical (or interpreted) resolution by the formula:

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

For example:

例如：

Apple iPhone 6s

苹果 iPhone 6s

• Actual Resolution: 750 x 1334
• CSS Pixel Ratio: 2
• Logical Resolution:

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

When viewing a web page, the CSS will think the device has a 375x667 resolutionscreen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.

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

Some other examples:

其他一些例子：

Samsung Galaxy S4

三星Galaxy S4

• Actual Resolution: 1080 x 1920
• CSS Pixel Ratio: 3
• Logical Resolution:

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

iPhone 5s

iPhone 5S

• Actual Resolution: 640 x 1136
• CSS Pixel Ratio: 2
• Logical Resolution:

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

Why does the Device Pixel Ratio exist?

为什么会存在设备像素比？

The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see.

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

A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.

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

So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.

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

Here is a tool that also tells you your current device's pixel density:

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

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

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

回答by Sam Dutton

Boris Smus's article High DPI Images for Variable Pixel Densitieshas a more accurate definition of device pixel ratio: the number of device pixels per CSS pixel is a good approximation, but not the whole story.

Boris Smus 的文章High DPI Images for Variable PixelDensities对设备像素比有更准确的定义：每个 CSS 像素的设备像素数是一个很好的近似值，但不是全部。

Note that you can get the DPR used by a device with window.devicePixelRatio.

请注意，您可以通过window.devicePixelRatio.

回答by oezi

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

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

-moz-device-pixel-ratio
Gives the number of device pixels per CSS pixel.

-moz-device-pixel-ratio
给出每个 CSS 像素的设备像素数。

this is almost self-explaining. the number describes the ratio of how much "real" pixels (physical pixerls of the screen) are used to display one "virtual" pixel (size set in CSS).

这几乎是不言自明的。该数字描述了使用多少“真实”像素（屏幕的物理像素）来显示一个“虚拟”像素（大小在 CSS 中设置）的比率。