Screen resolution explained
Resolution is the number of pixels a screen shows, written as width × height. More pixels means sharper text and images, or more space for windows. Because modern screens pack pixels very densely, operating systems scale everything up so it stays readable — which is why websites see a smaller “CSS pixel” resolution than the panel's physical one. This page shows both.
Common screen resolutions
| Name | Resolution | Aspect ratio |
|---|---|---|
| HD / 720p | 1280 × 720 | 16:9 |
| Laptop HD | 1366 × 768 | 16:9 |
| Full HD / 1080p | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / 1440p | 2560 × 1440 | 16:9 |
| Ultrawide QHD | 3440 × 1440 | 21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
| 5K | 5120 × 2880 | 16:9 |
Scaling and why it matters
Windows shows scaling as a percentage (100%, 125%, 150%, 200%); macOS uses “looks like” sizes; phones use a fixed pixel ratio. At 150% scaling, a 2560×1440 laptop screen behaves like 1707×960 for layout. If text looks blurry, make sure the display's native resolution is selected and adjust scaling instead of lowering the resolution.
For web designers and developers
The viewport size is what CSS media queries respond to, and devicePixelRatio decides which image from a
srcset the browser downloads. Resize the window or zoom the page and the numbers update live, which makes this
a quick way to check breakpoints. Use Copy details to paste the full report into a bug ticket.
More display tests
Check how fast your screen refreshes with the refresh rate test, look for faulty pixels with the dead pixel test, or test a touch display with the touch screen test.
Frequently asked questions
What is my screen resolution?
It is shown in large numbers at the top of this page. The first figure is the size your operating system reports to websites (in CSS pixels). If you use display scaling — 125%, 150% or a Retina/HiDPI screen — the physical pixel count is shown underneath.
Why is my resolution lower than my monitor’s?
Display scaling. A 4K monitor (3840×2160) at 150% scaling reports 2560×1440 to websites so text stays readable. The screen still uses all of its pixels; the physical size is shown under the main number. Browser zoom changes the device pixel ratio too.
What is the device pixel ratio?
The number of physical screen pixels per CSS pixel. 1 means no scaling, 2 is typical for Retina Macs and most phones, and 3 for many high-end phones. Web pages use it to load sharper images on high-density screens.
What is the difference between screen size and viewport?
Screen size is the whole display. The viewport is the part of the browser window that shows the page, without the tabs, address bar and taskbar. Web designers test layouts against viewport sizes.
How do I change my screen resolution?
On Windows: Settings → System → Display → Display resolution (choose the one marked Recommended). On a Mac: System Settings → Displays, then pick a size. On phones the resolution is fixed, though some Android phones offer a lower resolution to save battery.