CSS - (Device) Pixel Ratio

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

The device pixel ratio (also called CSS Pixel Ratio) is what determines how a device's screen resolution is interpreted by the CSS.

The device pixel ratio is the ratio between:


3 - Formula

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>

4 - Example

4.1 - Formula Calculation for Apple iPhone 6s

<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.

4.2 - Ratio by Device

Nokia Lumia 1020 1.6667
Samsumg Galaxy S4 3
Apple iPhone 6 Plus 2.46

Source: DPI Love