What the values mean
| Screen resolution | The display’s size in CSS pixels as the OS reports it to the browser. Multiply by the pixel ratio for physical pixels. |
| Device pixel ratio | Physical pixels per CSS pixel: 1 on standard monitors, 2 on Retina/HiDPI, 2.6–3.5 on phones. |
| Viewport | The visible page area — what websites actually design for. Resize the window and watch it change. |
| Colour depth | Bits per pixel the browser reports (usually 24 or 30). |
| HDR / gamut | Whether the browser says the display can show HDR (high dynamic range) and wide colour (P3/rec2020). |
Common resolutions
| Name | Pixels | Aspect |
|---|---|---|
| HD | 1280×720 | 16:9 |
| Full HD | 1920×1080 | 16:9 |
| QHD | 2560×1440 | 16:9 |
| 4K UHD | 3840×2160 | 16:9 |
| Ultrawide | 3440×1440 | 21:9 |
| MacBook Air 13 | 2560×1664 (DPR 2) | 16:10 |
| iPhone 16 | 1179×2556 (DPR 3) | 19.5:9 |
Related tests
Refresh rate testReal Hz, judder checkDead pixel testFull-screen colours, stuck pixelsTouch screen testDead zones, multi-touch, ghost touch
Questions, answered
Why is my resolution shown smaller than my monitor’s spec?
The browser reports CSS pixels after OS scaling. A 4K monitor at 200 % scaling shows 1920×1080 with a pixel ratio of 2.
How accurate is the ruler?
After calibrating with a standard 85.6 mm card it is accurate to about 1 %. Without calibration browsers assume 96 CSS pixels per inch, which is rarely the physical truth.