CSS viewport, screen resolution, and DPR

dpr, css, viewport

CSS viewport / resolution / DPR note

When testing a real device, the values I care about for CSS are CSS pixels, not the marketing/spec sheet screen resolution.

A phone might have a physical screen resolution like:

1220 × 2712 physical pixels

But CSS does not usually work directly with those physical pixels. Browsers use a scaled viewport measured in CSS pixels.

To get the real values from a device, connect the phone with USB debugging, open it through Chrome remote DevTools, and run:

console.log(window.innerWidth, window.innerHeight, window.devicePixelRatio);

Example result:

375 643 3.25

This means:

window.innerWidth  = 375 CSS px
window.innerHeight = 643 CSS px
devicePixelRatio   = 3.25

So for responsive CSS/media queries, the useful width is:

@media (max-width: 375px) {
  /* styles for this real viewport size */
}

The device pixel ratio explains how CSS pixels map to physical pixels:

375 CSS px × 3.25 DPR = 1218.75 physical px

That matches the phone’s physical width of roughly 1220px.

So the practical rule:

Use window.innerWidth and window.innerHeight for CSS/layout decisions.
Use devicePixelRatio only to understand how those CSS pixels map to the physical screen.

For my POCO X7 Pro, Chrome reported:

375 × 643 CSS px
DPR: 3.25

Nicely formatted in a table:

console.table({
  cssViewportWidth: window.innerWidth,
  cssViewportHeight: window.innerHeight,
  devicePixelRatio: window.devicePixelRatio,
  physicalWidthApprox: window.innerWidth * window.devicePixelRatio,
  physicalHeightApprox: window.innerHeight * window.devicePixelRatio,
});