What is the Device Pixel Ratio (DPR), CSS Pixel Ratio or simply Pixel Ratio ?

About

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:

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>



Dpi Vs Hpi Pixel

Javascript

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.

Usage

Font Size

Effect of device-pixel-ratio on font size

device-pixel-ratio font size
1 16px
1.5 24px
2 32px

Responsive Image

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.

Example

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.

Ratio by Device

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

Source: DPI Love

Emulate with Devtool

The browser devtool permits to change and emulate this property.

Example with chrome

How to change the device pixel ratio in chrome devtool





Discover More
CSS - Pixel (Logical Pixel)

CSS pixels are logical pixels used in CSS declarations such as width: 300px or font-size: 14px. An element with width: 300px is always exactly 300 CSS pixels wide CSS pixels are not the actual pixel...
CSS - Resolution

resolution is a media feature that is used in media query to target styling rule to a specific device. The resolution with javascript can be calculated by multiplying the device pixel ratio by 96....
CSS - Screen

In CSS context, a screen is a (visual) media type that is intended primarily for color computer screens. A user agent on a screen generally impose a minimum width and choose an initial width based on...
Image Intrinsic Dimension
Raster (BitMap) Image

Raster graphics (also called bitmap) is one of the two type of image. The image is represented as dot matrix data structure. A raster is technically characterized by the: width and height of the image...
Responsive HTML image with the srcset attribute

How to delegate the choice of an image to the browser with the srcset attribute.
Card Puncher Data Processing
What is a device pixel ?

In a clear and simple definition, this page explains what a device pixel is



Share this page:
Follow us:
Task Runner