what exactly is device pixel ratio?

Question

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 do

Answer 1

Device Pixel Ratio == CSS Pixel Ratio

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

A browser's CSS calculates a device's logical (or interpreted) resolution by the formula:

For example:

Apple iPhone 6s

• Actual Resolution: 750 x 1334
• CSS Pixel Ratio: 2
• Logical Resolution:

When viewing a web page, the CSS will think the device has a 375x667 resolution screen and Media Queries will respond as if the screen is 375x667. But the rendered elements on the screen will be twice as sharp as an actual 375x667 screen because there are twice as many physical pixels in the physical screen.

Some other examples:

Samsung Galaxy S4

• Actual Resolution: 1080 x 1920
• CSS Pixel Ratio: 3
• Logical Resolution:

iPhone 5s

• Actual Resolution: 640 x 1136
• CSS Pixel Ratio: 2
• Logical Resolution:

Why does the Device Pixel Ratio exist?

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 roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.

So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.

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

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