Screen resolution test
Everything your browser will tell you about this screen, with every value labelled for what it actually means.
| Value | What your browser says | Source |
|---|---|---|
| Reading your display… | ||
Your device pixel ratio changed, which usually means browser zoom. Set zoom back to 100 per cent before comparing these numbers with anything.
How to run this test
- Read the table. Every row says where the number came from, because several of these values are routinely mistaken for hardware facts.
- Check that your browser zoom is at 100 per cent. Zoom changes the device pixel ratio and therefore changes half the numbers here.
- Compare the estimated physical pixels against the resolution your operating system reports in its display settings. If they disagree, display scaling is the reason.
- Use Copy summary if you need to paste the details into a support ticket or a forum post.
What a problem looks like
- The screen size looks wrong for your monitor
- Most likely display scaling. At 150 per cent scaling a 3840 by 2160 panel reports 2560 by 1440 CSS pixels with a device pixel ratio of 1.5, so both numbers are correct and neither is the panel resolution on its own. Multiply them and you get back to the panel.
- The values change when you move the window
- Expected on a multi-monitor setup with different displays. The numbers describe whichever screen the window is currently on, so drag the window to the display you want to check and the readings update.
- A fractional device pixel ratio
- Caused by display scaling such as 125 or 150 per cent, or by browser zoom. It is not a fault, but it does mean single-pixel test patterns cannot be rendered exactly, which is why the gamma and sharpness tools refuse to give an answer at those settings.
- Colour depth reports 24-bit
- Almost every browser reports 24 regardless of the panel. The value has been effectively frozen for compatibility reasons and says nothing about whether your display is 6-bit, 8-bit or 10-bit.
What to do next
If something looks wrong, check it again in a normally lit room and from straight on, then check whether it appears on a second device. If it only happens on this screen and you are still inside the return window, that is the time to contact the retailer.
Questions people actually ask
What is my screen resolution?
The table above shows what your browser reports. The row you probably want is estimated physical pixels, which is your screen size in CSS pixels multiplied by the device pixel ratio. On a display with no scaling those match your panel resolution exactly. With scaling in play they still multiply back correctly, which is why the estimate is usually right.
Why is this an estimate rather than a fact?
Because the web platform does not expose panel resolution. It exposes a size in CSS pixels and a ratio, both of which are affected by operating system scaling and browser zoom. On macOS in particular the system often renders at a scaled intermediate resolution before sending an image to the panel, and no browser API sees through that.
Can you tell me how many inches my screen is?
No. Physical size is not available to a web page at all. A 24-inch and a 27-inch 1080p monitor are completely identical as far as JavaScript is concerned. Working out pixels per inch requires you to supply the diagonal, measured corner to corner across the visible picture.
What is the difference between a CSS pixel and a device pixel?
A CSS pixel is a unit of layout, kept at roughly the same apparent size across devices so text stays readable. A device pixel is a physical element on the panel. The device pixel ratio is how many device pixels make up one CSS pixel: 1 on a standard monitor, 2 on most Retina displays, and often 2.5 or 3 on phones.
Does browser zoom affect these numbers?
Yes, substantially. Zooming changes the device pixel ratio and the reported window size. If you are comparing readings, put zoom back to 100 per cent first, the page watches for zoom changes and updates as you go.