Resolution, scaling and viewport explained
- Screen resolution is the number of real pixels on your display, for example 1920 × 1080 or 2560 × 1440.
- Device pixel ratio is your scaling. At 150% scaling, the system draws everything 1.5 times larger, so a 2560 pixel wide screen behaves like a 1707 pixel wide one. Phones and Retina Macs use 2x or 3x.
- Viewport is the inside of your browser window, which websites use to lay out the page.
- Colour depth is the number of bits per pixel. 24-bit means 8 bits for each of red, green and blue.
The physical resolution is worked out from the screen size and the pixel ratio, so with browser zoom on it can be slightly off. Reset zoom with Ctrl+0 (Cmd+0 on Mac) for the exact figure.
Common resolutions
| Name | Resolution |
|---|---|
| HD / 720p | 1280 × 720 |
| Full HD / 1080p | 1920 × 1080 |
| QHD / 1440p | 2560 × 1440 |
| 4K UHD | 3840 × 2160 |
| Ultrawide QHD | 3440 × 1440 |
Change your resolution
Windows: Settings, System, Display, Display resolution, and pick the option marked Recommended for the sharpest picture. Mac: System Settings, Displays. On a Mac the options are scaled sizes, and the screen always draws at its full native resolution.
Frequently asked questions
Short answers to the questions people ask most about this test.
How do I find my screen resolution?
Open this page. The big number at the top is your resolution in physical pixels.
Why is my resolution shown smaller than my monitor?
Scaling is on. At 125% or 150% the browser reports a smaller size in CSS pixels. The physical resolution line corrects for that.
What is device pixel ratio?
It is how many physical pixels make up one CSS pixel. A value of 2 means a Retina or high-density screen.