How this screen resolution test works
We read four numbers straight from your browser: window.screen.width × height for your display, window.innerWidth × innerHeight for the visible browser viewport, window.devicePixelRatio for HiDPI scaling, and screen.colorDepth for color quality. Together these tell you exactly what your hardware reports and how your operating system is scaling it.
Everything runs locally in your browser — no data is sent to any server, and the values refresh the moment you resize the window or rotate your phone.
Screen resolution vs viewport size — and which one matters
- Screen resolution = total pixels your monitor can show. Useful when buying hardware, picking wallpapers, or recording video.
- Browser viewport = pixels available inside the browser window after subtracting the URL bar, tabs, scrollbars and any docked dev tools. This is what CSS media queries use.
- Available area = screen size minus OS chrome (taskbar, macOS dock, menu bar). This is the maximum usable area before maximizing.
- Device pixel ratio = scaling factor. A DPR of 2 means each CSS pixel is rendered with 2×2 hardware pixels for a sharper image.
Common screen resolutions in 2026
| Name | Resolution | Aspect | Typical device |
|---|---|---|---|
| HD | 1280 × 720 | 16:9 | 720p — common laptop & low-end monitor |
| Full HD | 1920 × 1080 | 16:9 | 1080p — most popular desktop resolution |
| QHD / 2K | 2560 × 1440 | 16:9 | 1440p — gaming & creator monitors |
| 4K UHD | 3840 × 2160 | 16:9 | 2160p — premium monitors and TVs |
| 5K | 5120 × 2880 | 16:9 | Apple Studio Display, iMac 27" |
| MacBook Air 13" | 2560 × 1664 | 20:13 | Native, scaled by macOS |
| iPhone 15 Pro | 1179 × 2556 | 131:284 | Native pixels @ 3x DPR |
| iPad Pro 12.9" | 2048 × 2732 | 512:683 | Native pixels @ 2x DPR |
When to test your screen resolution
- Web design & QA — verify your responsive layout at the user's actual viewport.
- Bug reports — paste an exact resolution + DPR into a ticket so developers can reproduce.
- Buying a monitor — confirm what your current display reports before upgrading.
- Gaming — match in-game resolution to your native panel for the sharpest image.
- Streaming & screen recording — set OBS or your recorder to your real output resolution.
- Choosing a wallpaper — download an image at least as large as your physical pixels (0 × 0).
Frequently asked questions
What is screen resolution?
Screen resolution is the number of distinct pixels your display can show, written as width × height (e.g. 1920×1080). More pixels mean sharper text and images, but everything looks smaller unless your operating system applies scaling.
What's the difference between screen resolution and viewport size?
Screen resolution is the total pixels of your physical display. Viewport size is just the area inside the browser window where web pages render — it excludes the address bar, tabs, taskbar, and any open dev tools. Web designers care most about viewport.
What is device pixel ratio (DPR)?
DPR tells you how many physical pixels make up one CSS pixel. A 'Retina' or 'HiDPI' screen has DPR 2 or 3, meaning a 100×100 CSS image actually uses 200×200 or 300×300 hardware pixels — which is why it looks sharper.
Why does my reported resolution differ from what I bought?
Operating systems often scale the display so UI is comfortable to read. A 4K monitor at 150% scaling reports a logical resolution of 2560×1440 to the browser even though it has 3840×2160 hardware pixels. The DPR shown above tells you the real ratio.
What's the most common screen resolution in 2026?
Globally, 1920×1080 (Full HD) is still the most common desktop resolution, followed by 1366×768 on older laptops. On mobile, viewports range from 360×800 (Android) to 390×844 (iPhone 14/15) and 430×932 (iPhone Pro Max).
How do I change my screen resolution?
On Windows: right-click the desktop → Display settings → Display resolution. On macOS: System Settings → Displays → Resolution (hold Option to see all native sizes). On Chromebook: Settings → Device → Displays. Browser viewport changes simply by resizing the window.
Is this screen resolution test accurate?
Yes. It reads directly from your browser's window.screen and window APIs, which report values straight from your operating system. The numbers update live when you resize the window or rotate your device.