设备像素比究竟是什么? [英] what exactly is device pixel ratio?

问题描述

每一篇关于移动网络的文章都提到了这一点，但我找不到任何关于这个属性测量究竟是什么的解释.
谁能详细说明一下这样的查询会检查什么?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),只有屏幕和 (min--moz-device-pixel-ratio: 1.5),只有屏幕和(-o-device-pixel-ratio: 3/2)，只有屏幕和(最小设备像素比:1.5){//高分辨率图像放在这里}

解决方案

简短回答

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

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

公式为:

地点:

是物理线性分辨率

和:

是逻辑线性分辨率

其他设备报告不同的设备像素比，包括非整数.例如，诺基亚 Lumia 1020 报告 1.6667，三星 Galaxy S4 报告 3，Apple iPhone 6 Plus 报告 2.46 (来源:

这对网页设计有很多影响，例如准备高清图像资源以及在不同设备像素比率下仔细应用不同的图像.您不想强迫低端设备下载非常高分辨率的图像，而只是在本地缩小它的大小.您也不希望高端设备放大低分辨率图像以获得模糊的用户体验.

如果您坚持使用位图图像，为了适应许多不同的设备像素比，您应该使用 CSS 媒体查询 或 HTML 图片元素 为不同的设备组提供不同的资源集.将此与诸如 background-size:cover 或明确设置背景-size 到百分比值.

示例

#element { background-image: url('lores.png');}@media only screen and (min-device-pixel-ratio: 2) {#element { 背景图片:url('hires.png');}}@media only screen and (min-device-pixel-ratio: 3) {#element { background-image: url('superhires.png');}}

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

矢量图形案例

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

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

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

}

解决方案

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.

• Physical resolution: 960 x 640
• Logical resolution: 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.

Discussion

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

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 Queries or the HTML picture Element to provide different sets of resources for different groups of devices. Combine this with nice tricks like background-size: cover or explicitly set the background-size to percentage values.

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 px unit in CSS always operates on logical pixels.

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 element lets 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).

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.

这篇关于设备像素比究竟是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！