RunTheTests
/

Screen Resolution & DPI

Your resolution has three different answers — see all of them and why they differ.

How this test works

Three numbers get reported as one, and they answer different questions. What the browser calls the screen size is in CSS pixels — the size after your operating system's display scaling, so a 3840-wide panel at 150% scaling reports 2560. Multiplying by the device pixel ratio recovers the device pixels, which is most likely what the panel is running at. The viewport is smaller than both, because the browser's own interface takes some of it, and it is the number that matters for responsive design. Browser zoom moves two of the three and leaves the reported screen size untouched, which is the usual reason a page and a settings screen disagree.

What the results mean

Device pixels
CSS pixels times the device pixel ratio. Most likely the panel's working resolution.
Reported by the browser
CSS pixels, after operating system scaling. Smaller than the panel on a scaled display.
Device pixel ratio
How many device pixels make one CSS pixel. Non-integer means browser zoom on top.
Panel native resolution
Not exposed. No web page can read past what the operating system reports.

Common problems and fixes

This says 2560 and my display settings say 3840
Both are right. The browser reports CSS pixels after scaling; multiply by the device pixel ratio shown here and you get 3840.
The numbers change when I zoom
Expected. Zoom changes the device pixel ratio and the viewport and leaves the screen size alone. Press Ctrl+0, or Cmd+0, to reset.
Which number should I use for a design?
The viewport. It is the area a page actually receives, and it is what a media query responds to.

Frequently asked questions

Why does my resolution look wrong here?

Because the browser reports CSS pixels, which is the size after your operating system's display scaling. On a scaled display that is a smaller number than the panel — multiply by the device pixel ratio to get back to device pixels.

What is the device pixel ratio?

How many device pixels make up one CSS pixel. A ratio of 2 means text is drawn at twice the resolution so it stays sharp, and it is why a high-density screen reports a smaller logical size.

Can a website see my real panel resolution?

No. Everything a page can read has already been through the operating system's scaling. The panel's native resolution is not exposed at all.

More in Connection