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 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 :
window.devicePixelRatio == 1.25
window.screen.availWidth == 1536
The logical width would be:
window.devicePixelRatio * window.screen.availWidth == 1920
Related Topics
Any Way to Declare a Size/Partial Border to a Box
Why Does the Order of Media Queries Matter in Css
How to Conditionally Apply a Class
Css to Select/Style First Word
Font Awesome 5 Shows Empty Square When Using the Js+Svg Version
How to Float 3 Divs Side by Side Using Css
How to Select an Element Based on the State of Another Element in the Page With Css
Specificity of Inherited CSS Properties
How to Identify Unused CSS Definitions from Multiple CSS Files in a Project
Css :After Not Adding Content to Certain Elements
How to Get Ff 33.X Flexbox Behavior in Ff 34.X
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters
Css Scrollbar Style Cross Browser
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"