Device Pixel Ratio (DPR): The Relationship Between CSS Pixels and Physical Pixels

If the DPR of your display device is greater than 1, quest for asking yourself “what is my screen resolution?” might have left you wondering why is the info from screen resolution test here different than the resolution listed in the official specifications of the device?

Answer is that applications, including your browser, use CSS pixels, while manufacturer of your device gives display resolution info in physical pixels. CSS pixel is a realization of the reference pixel.

Device Pixel Ratio(DPR) is a number given by device manufacturers and it’s used for HiDPI (High Dots Per Inch) or Retina (Apple’s trademark) displays, which are part of modern smartphones, tablets and even some laptops and monitors.

DPR is in direct correlation with pixel density of the display, the higher the density the greater the DPR value.

DPR is the ratio between physical (device) pixels and logical (CSS) pixels in either horizontal (width) or vertical (height) direction of a screen.

In other words, DPR is a number used for calculating CSS resolution of the screen. From DPR we can directly see how many actual physical hardware pixels make up one CSS pixel.

Example:
Apple iPhone 12
Resolution in device(physical) pixels: 1170 x 2532
DPR: 3
Width: 1170/3 = 390, Height: 2532/3 = 844
Therefore, resolution in CSS pixels: 390 x 844

Since DPR is 3, in pixel grid: 3 (width) x 3 (height) = 9; 9 physical pixels are used to form one CSS pixel.

My Screen Resolution - Device Pixel Ratio

Brief history and explanation why DPR is necessary:

High pixel density devices were introduced to the consumer market in 2010 when Apple began shipping its products iPhone, iPad and iMac, equipped with Retina displays.

Idea behind these high density pixel displays was to provide high-definition display that equals or exceeds the pixel density that can be differentiated by the retina of the human eye.

After the success of Retina display, various other manufacturers introduced their high pixel density displays on the market and they have since spread to the regular users.

Creating modern displays with higher physical pixel densities brought us the benefits of clearer images and sharper text, but if browsers kept using one-to-one mapping between CSS pixels and device pixels as they did for classic lower pixel density desktop monitors – everything on screen would be too small to see or read.

Purpose of DPR is to keep consistent size of CSS pixels and therefore consistent size of letters, symbols, images and everything else on screen, across a variety of devices with different physical pixel densities.