What these numbers mean
- Screen resolution: the number of real pixels on your display, width × height. This is the figure on the box of a monitor, laptop or phone.
- Screen size in CSS pixels: the size the browser works with after display scaling. With 150% scaling on a 1920 × 1080 screen, it is 1280 × 720.
- Device pixel ratio: how many real pixels make up one CSS pixel. Multiply the CSS size by it to get the screen resolution.
- Browser viewport: the area where web pages are drawn, without the tabs, address bar and scroll bar. Web designers test layouts at these sizes.
- Browser window: the outside size of the whole browser window, including its toolbars.
- Available screen area: the screen minus areas the system keeps for itself, such as the Windows taskbar or the macOS menu bar and Dock.
- Aspect ratio: the shape of the screen. Common shapes are named, so 2560 × 1080 shows as “≈ 21:9” for an ultrawide monitor.
- Color depth: the number of bits the browser uses per pixel for color. Most screens report 24-bit; some HDR and wide-color displays report 30-bit.
Browsers round some of these values, so on screens with unusual scaling, such as 175%, the resolution can be off by a pixel. Our monitor test also shows your refresh rate and checks for dead pixels.
Common screen resolutions
| Name | Resolution | Aspect ratio | Typical use |
|---|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 | Small laptops, older TVs |
| — | 1366 × 768 | ≈ 16:9 | Budget laptops |
| Full HD (1080p) | 1920 × 1080 | 16:9 | Most monitors and laptops |
| — | 1920 × 1200 | 16:10 | Office monitors, some laptops |
| QHD (1440p) | 2560 × 1440 | 16:9 | Gaming and 27-inch monitors |
| — | 2560 × 1600 | 16:10 | Many 13–16-inch laptops |
| Ultrawide QHD | 3440 × 1440 | ≈ 21:9 | Ultrawide monitors |
| 4K UHD | 3840 × 2160 | 16:9 | TVs and high-end monitors |
| 5K | 5120 × 2880 | 16:9 | Studio Display, 27-inch iMac |
How to change your screen resolution
Windows 11 and 10
- Right-click an empty part of the desktop and choose Display settings.
- Under Display resolution, choose the option marked Recommended. That is your screen’s full, sharpest resolution.
- If text is too small or too large, change Scale on the same page instead of lowering the resolution.
macOS
- Open System Settings › Displays.
- Pick one of the sizes shown, from Larger Text to More Space. On a Retina screen macOS draws at a high resolution and scales the picture to fit, so text stays crisp whichever size you choose.
Phones and tablets
The resolution of a phone or tablet screen is fixed. To make things bigger or smaller, use the display size or text size option in the display settings.
Screen looks blurry or stretched?
- Check that the resolution above matches the panel’s native resolution. If it is lower, choose the Recommended resolution in your display settings.
- Check the aspect ratio. A 4:3 resolution on a 16:9 screen gets stretched sideways or shows black bars.
- On an external monitor, use a cable and port that support its full resolution and refresh rate. Older HDMI cables and adapters can limit a 4K screen to a lower resolution or 30 Hz.
- Update the graphics driver. A generic driver often offers only low resolutions.
Frequently asked questions
Why is my resolution different from what my monitor box says?
If the number shown here matches the box, everything is set up correctly. If it is lower, your computer is probably set to a lower resolution than the screen supports, which makes everything look slightly blurry. Open your display settings and choose the option marked “Recommended”. If this page shows the full resolution but text looks large, that is display scaling, which is normal and keeps text readable.
What is the difference between screen resolution and viewport size?
Screen resolution is the number of pixels on the whole display. The viewport is the part of the browser window where web pages are drawn, measured in CSS pixels. Web designers use the viewport size to check how a layout fits, which is why it changes when you resize the window and the screen resolution doesn’t.
What does a device pixel ratio of 1.25, 1.5 or 2 mean?
It is how many real screen pixels the browser uses for each CSS pixel. A ratio of 2 means sharper text and images, as on a Mac Retina display or most phones. On Windows, 1.25 or 1.5 usually comes from the 125% or 150% scale setting. Your screen resolution is the CSS size multiplied by this ratio.
Does zooming the page change the result?
In most desktop browsers, yes. Zooming in or out changes the pixel ratio the browser reports, so the calculated resolution changes too. Press Ctrl+0 (Cmd+0 on a Mac) to reset the zoom to 100% for an accurate reading.
Is it accurate on a phone or tablet?
Yes. Phones report a CSS size such as 390 × 844 and a pixel ratio such as 3, which gives the real panel resolution of 1170 × 2532. Turning the phone sideways swaps the width and height.
Is any of this information sent anywhere?
No. The numbers are read by your browser and shown on this page only. Nothing is stored or uploaded. The Copy details button copies the text to your own clipboard so you can paste it into a support request.