What is device pixel ratio (DPR)?

Glossary · Updated October 23, 2026 · Also called: pixel ratio, pixel density, Retina scale

Definition Device pixel ratio (DPR) is the number of physical screen pixels used to draw one CSS pixel in each direction. A DPR of 3 means each CSS pixel is 3×3 device pixels. Current iPhones have a DPR of 3 (older and XR-class models 2), Android phones commonly 2.625–4, and current iPads 2. JavaScript reads it as window.devicePixelRatio.

Related guide: Page Weight: How to Reduce Page Size for Mobile

How does device pixel ratio work?

Screen resolution divided by DPR gives the viewport size in CSS pixels. An iPhone 16 Pro Max screen is 1320 physical pixels wide; at a DPR of 3 that is a 440 px viewport. A Pixel 7 is 1080 pixels wide with a DPR of 2.625, which gives 412 CSS px (rounded). Higher DPR makes text and images sharper, but it does not give the page more room: the layout only sees the CSS width.

The ratio is not always a whole number. Android devices report values such as 2.625 or 2.75, and desktop browsers change the DPR when you zoom: at 150% browser zoom on a 1× monitor, devicePixelRatio is 1.5.

Where it matters

• Images. A photo shown 400 CSS px wide needs about 800–1200 actual pixels to look sharp on a 2× or 3× phone. srcset lets the browser pick the right file for the screen instead of sending the largest one to everyone.
• Canvas. A <canvas> has its own pixel buffer; scale it by devicePixelRatio or drawings look blurry on phones.
• Screenshots. A full-page screenshot from a 3× phone is three times wider than the viewport. To map an element's CSS position onto it, multiply by the image width divided by the viewport width.

Example

Serve a 2× and 3× version of a fixed-size logo:

<img src="logo-160.png"
     srcset="logo-160.png 1x, logo-320.png 2x, logo-480.png 3x"
     width="160" height="40" alt="Acme">

In CSS, the resolution media feature targets dense screens: @media (min-resolution: 2dppx) { … }. Safari supports the standard syntax since version 16; older Safari needed -webkit-min-device-pixel-ratio.

On iPhone vs Android

Apple uses a few fixed values: 2 for the iPhone SE, XR and 11 and current iPads, 3 for other recent iPhones. Android manufacturers choose from many density buckets, so DPR varies even between phones of the same size; the mobile viewport sizes table lists the exact value per model. MobileCheck emulates each device with its real pixel ratio, which is why the screenshots in a report are sharp at their real resolution.

Related terms

• CSS pixelA CSS pixel (px) is the unit of length in CSS: 1/96 of an inch by definition, drawn with several device pixels on high-density screens.
• ViewportThe viewport is the area of the browser window where a web page is drawn, measured in CSS pixels: about 360–440 px wide on today's phones.
• srcsetsrcset is an img attribute listing several versions of an image so the browser downloads the smallest one that looks sharp on the current screen.
• Media queryA media query is a CSS condition (@media) that applies styles only when the device matches it, such as a minimum viewport width or dark mode.

Guides and tools

• Page Weight: How to Reduce Page Size for Mobile
• Mobile viewport sizes
• What is my viewport
• srcset generator

Sources

1. MDN: Window.devicePixelRatio
2. MDN: Responsive images

All 27 glossary terms, A to Z