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:
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.
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/
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.
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").
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
What is the view port width, height and device pixel ratio for the devices Google Pixel and Google Pixel XL
Both the Pixel and Pixel XL are listed to have a css pixel resolution of 411×731, with device-pixel-ratios of 2.6 and 3.5 respectively.
Source: https://material.io/devices/ which is a Google site.
That's odd though, considering most phones get more effective pixels as the screen size increases, rather than just blowing everything up bigger and getting a higher dppx (Dots Per Pixel).
That does jive with Lord Flash's screen capture from the smaller Pixel; but doesn't help to validate the Pixel XL. If someone could post a screen capture from the Pixel XL I could determine the scaling from that.
Understanding responsive images and device pixel ratio
The answer is: Yes it has to do with the device pixel ratio. And yes, the device is doing it right.
The image is shown correctly because if you don't override the image dimension with CSS the sizes
attribute is used (in your case "100vw"
, which is ~"100%"
) (If you change your sizes
to "50vw"
you will get around "50%"
width).
The key part is that there are different concepts of pixels.
Normal media queries (min-width, max-width...) are measured in so called layout pixels (also CSS pixels). These pixels are an abstraction of the real physical pixels (device pixels) to have a satisfying and reliable pixel unit to do layout stuff (CSS) for retina screens (and sometimes very low resolution screens). Using the physical pixels as layout pixels would mean on small but high resolution devices very, very small layout objects. In CSS world a pixel means a layout pixel. This is calculated by device pixel / device pixel ration.
However, in case of images its all about how many pixels your device really has. If it has 1000px pixels screen width and the image is displayed at 100vw, it makes sense to load a 1000 pixel width image to satisfy the full quality of your screen. (= Each physical screen pixel gets a real image pixel assigned.)
This makes even sense if these 1000 physical pixels are measured in only 360 layout pixels.
See also: A pixel is not a pixel.
Related Topics
Are CSS Frameworks Really Worth Using
-Webkit-Transform-Style: Preserve-3D Not Working
Display:Block Not Working in Chrome or Safari
CSS Problem with Background-Attachment:Fixed;
Difference Between Blank and Empty Pseudo-Classes
Get Color Attribute from the Styles Table
Re-Order Entire Page with CSS Flexbox
Visual Studio Code CSS Indentation and Formatting
Use Variable Defined in Config.Rb in SCSS Files
How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap
Background-Position Percentage Not Working
Dynamic Variable Names in Less CSS
Cross-Browser Issue: Min-Height and Collapsing Margins
Remove 3D Press Effect Internet Explorer Button
Lighten the Background Colour from Another Class
Need CSS Text Color for A:Hover to Take Precedence Over A:Visited