What is my screen resolution?

Screen, viewport and physical pixels

Three different numbers describe your display, and mixing them up is a common source of confusion when building responsive layouts.

• Screen resolution is your entire display measured in CSS pixels — the unit every CSS length ultimately resolves to.
• Viewport size is the visible page area inside the browser. This is what media queries respond to, and what you should design against.
• Physical pixels is the hardware count: screen resolution multiplied by the device pixel ratio. It determines how large an image must be to look sharp.

Why device pixel ratio matters

A phone reporting 390 × 844 CSS pixels at a ratio of 3 has 1170 × 2532 physical pixels. An image served at 390 pixels wide will be stretched across 1170 hardware pixels and look noticeably blurry. This is why srcset exists: it lets the browser pick a source matched to the device's actual density instead of guessing.

Designing for the viewport, not the screen

Users rarely browse full-screen on desktop, and browser chrome takes real space on mobile. Media queries respond to viewport width for exactly this reason. Testing at fixed "device resolutions" rather than a continuous range of viewport widths is how layouts end up breaking at sizes nobody checked.

Mobile viewport height is its own trap: address bars collapse as you scroll, so 100vh can exceed the visible area. The newer svh, lvh and dvh units exist to address it.

Screen size and privacy

Your exact viewport dimensions are an unusually strong fingerprinting signal, because window size is close to arbitrary — far more distinguishing than screen resolution, which clusters around a handful of common panel sizes. Some privacy-focused browsers deliberately round or letterbox the reported viewport for this reason.

See the full picture on the browser info page, or check your timezone, another common fingerprint input.

Why these numbers disagree with the spec sheet

A phone advertised with a 2532×1170 display will usually report something close to 844×390 here, and neither number is wrong. The advertised figure is physical pixels. The number a browser works in is CSS pixels — a unit deliberately decoupled from hardware so that text is the same physical size on a dense screen as on a coarse one.

The device pixel ratio is the bridge between them. At a ratio of 3, one CSS pixel is painted using a 3×3 block of physical pixels, so 844 CSS pixels occupy 2532 real ones. This is why a layout built to CSS-pixel breakpoints behaves identically on both, and why an image intended to look sharp needs to be supplied at two or three times its CSS dimensions.

Which measurement to use for what

The mistake worth avoiding is testing against screen size. A maximised browser on a 1920-pixel monitor has a viewport near 1920, but the same monitor with two windows side by side gives each about 950 — and a layout that consulted the screen will lay itself out for a width it does not have. Resize this page and watch which numbers move.