What Exactly Is Device Pixel Ratio

what exactly is device pixel ratio?

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:

linres_p/linres_l

Where:

linres_p is the physical linear resolution

and:

linres_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 as a non-linear angular measurement of 0.0213° viewing angle, which is approximately 1/96 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.

What is Device Pixel Ratio for?

From http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html, where the author discusses the differences in devicePixelRatio across mobile devices:

On iOS Retina devices, screen.width gives the width in dips. So both a
retina and a non-retina iPad report 768 in portrait mode. On the three
Android devices, screen.width gives the width in physical pixels; 480,
720, and 800, respectively. All browsers on the devices use the same
values. (Imagine if some browsers on the same device used dips and
others physical pixels!)

Which leads the author to the following conclusion:

  • On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count.
  • On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the dips count.

What matters in your case is screen width, plain and simple. The calculation of DIPs is something for the device to take care of, rather than you as the developer. If the device wants to compensate for a different pixel ratio, it will serve you a width in DIP and give the ratio. If it feels that pages should be displayed with the native unmodified pixel resolution, it will serve you that width instead. The author of the post also comes to the following conclusion which I find interesting:

Apple added pixels because it wanted to make the display crisper and smoother, while the Android vendors added pixels to cram more stuff onto the screen.

At any rate, use the width the browser gives you and leave it to the device to compensate.

How to calculate device pixel ratio

According to this article

http://www.html5rocks.com/en/mobile/high-dpi/

The magic number seems to be 150.

Dividing the physical ppi by the ideal ppi of 150, gives the device pixel ratio.

E.g. a device with 445ppi would have a dpr of 3 ->> 445 / 150

The simple calculation seems to hold up okay for many items on this list,

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Retina - Correlation between device pixel ratio and size of image?

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on a given device. You can think of dips as what the display "acts" like.

For example: a non-retina 27" iMac has a width of 2560 physical pixels. Everything is displayed 1:1, so it's also 2560 dips wide, so the devicePixelRatio is 1.

On your retina 27" iMac, the width is 5120 physical pixels. But the display "acts" like it's only 2560 pixels wide, so that everything is shown at the same physical size as the non-retina iMac. Therefore, it's still 2560 dips wide, so the devicePixelRatio is 2 (5120 / 2560), and you would serve 2x images.

(You can look up what the dips values are for your system – if you have a retina display – by going to System Preferences > Displays > Display and switching the Resolution toggle to Scaled, then hovering over the different options. For Default, on the 5K iMac, it'll say "Looks like 2560 x 1440").

what is different between devicePixelRatio and dppx?

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

CSS interprets a device's resolution by the formula: device_resolution/css_pixel_ratio. For example:

Samsung Galaxy S III

Actual resolution: 720 x 1280
CSS Pixel Ratio: 2
Interpreted resolution: (720/2) x (1280/2) = 360 x 640

When viewing a web page, the CSS will think the device has a 360x640 resolution screen and Media Queries will respond as if the screen is 360x640. But the rendered elements on the screen will be twice as sharp as an actual 360x640 screen.

Some other examples:

Samsung Galaxy S4

Actual Resolution: 1080 x 1920
CSS Pixel Ratio: 3
Interpreted Resolution: (1080/3) x (1920/3) = 360 x 640

iPhone 5s

Actual Resolution: 640 x 1136
CSS Pixel Ratio: 2
Interpreted Resolution: (640/2) x (1136/2) = 320 x 568

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. A typical full screen desktop monitor is a 24" monitor at 1920x1080. Imagine if that monitor was shrunk down to < 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small.

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

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

Here is a searchable list of device pixel ratios (they accept pull requests via GitHub if you have devices to add to this list)

http://dpi.lv/

Why is my website width is less than my screen resolution

First check that your zoom is 100%.

Device Pixel Ratio

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.
what exactly is device pixel ratio?

you can get this ratio using : window.devicePixelRatio.

If this ratio is greater than 1, then your available screen size will be less than the logical one.
This means that you can have a logical resolution of 1920 x 1080 while your hardware resolution is 1536 x 864

Example

First let us examine the available screen size using window.screen

Now, suppose that :

  1. window.devicePixelRatio == 1.25
  2. window.screen.availWidth == 1536

The logical width would be:

window.devicePixelRatio * window.screen.availWidth == 1920



Related Topics



Leave a reply



Submit