Home/ Questions/Q 7035345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:17:37+00:00

This is mentioned in every article about mobile web, but nowhere can I find

  • 0

This is mentioned in every article about mobile web, but nowhere can I find an explanation of what exactly does this attribute measure.
Can anyone please elaborate what do 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

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    res_p/res_l

    Where res_p is the physical linear resolution, and res_l 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 there is a reference pixel, which is a non-linear angular measurement of 0.0213° viewing angle. This is approximately 1/96 of an inch. 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.

    • 0