The device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the browser and also by CSS.
The device pixel ratio is the ratio between:
A browser's CSS calculates a device's logical (or interpreted) resolution by the formula: <MATH> \text{(Logical or CSS) Screen Resolution} = \frac{\displaystyle \text{(Physical or Device) Resolution}}{\displaystyle \text{Device Pixel Ratio}} </MATH>
You can get the calculated via the window property devicePixelRatio
console.log("The device pixel ratio for this browser is: "+window.devicePixelRatio);
If you take the browser in mobile mode (smaller viewport), you could also see a value of 3 in place of 1 because the browser emulate the mobile screen.
Effect of device-pixel-ratio on font size
device-pixel-ratio | font size |
---|---|
1 | 16px |
1.5 | 24px |
2 | 32px |
The device pixel ratio is also used by the browser in the calculation of the best image to download via the srcset img attribute allowing image to be responsive.
<MATH> \text{Logical Screen Resolution} = \frac{\displaystyle 750 \text{ x } 1334}{\displaystyle 2} = 375 \text{ x } 667 </MATH>
CSS will think the device has a 375×667 resolution screen and Media Queries will respond as if the screen is 375×667. But the rendered elements on the screen will be twice as sharp as an actual 375×667 screen because there are twice as many physical pixels in the physical screen.
Nokia Lumia 1020 | 1.6667 |
Samsumg Galaxy S4 | 3 |
Apple iPhone 6 Plus | 2.46 |
Source: DPI Love
The browser devtool permits to change and emulate this property.
Example with chrome