What Is My Resolution? Detect Screen, Viewport & DPR
See exactly what your browser thinks your screen is — viewport size, screen resolution, available space, device pixel ratio, aspect ratio and color depth. Useful for web development, gaming setup, and verifying your monitor is running at full resolution.
The four different 'resolutions' on your screen
There are four different numbers that all get called "resolution" in everyday speech. Knowing which one you mean matters — they describe different things, and they are usually different values on the same monitor. Here is the full breakdown:
| Term | What it means | Example |
|---|---|---|
| Native panel resolution | The actual number of physical pixels on the panel. Set by the manufacturer; cannot be changed. | 3840 × 2160 on a 4K monitor |
| Operating system resolution | What the OS sends to the monitor. Usually equals native, but can be lower for performance. | 2560 × 1440 on a 4K monitor (downscaled) |
| Screen resolution (CSS) | What the browser reports as window.screen.width/height. Includes OS scaling. | 1920 × 1080 at 200% scaling on 4K |
| Viewport size (CSS) | The actual drawable area inside the browser window. What websites care about. | 1903 × 945 (after browser chrome) |
Understanding device pixel ratio (DPR)
Device pixel ratio exists because physical screens got so dense that interface elements drawn at one-pixel-per-pixel became unreadable. A 4K monitor at 27 inches has about 163 pixels per inch — fine for photos, tiny for text. To keep text readable, the OS pretends the screen has fewer pixels and asks the browser to render at a smaller resolution, then scales the result up to fill the physical panel.
DPR is the ratio between physical pixels and CSS pixels. At DPR 2, one CSS pixel becomes a 2×2 grid of physical pixels. The browser renders at the CSS resolution (fast, sharp enough for text), and the OS upscales to the native resolution (free, no extra GPU work). On phones, DPR is typically 2 or 3 because the physical screen is small but high-density. On desktop monitors, DPR is 1 at 100% scaling and 2 at 200% scaling.
How to check your real screen resolution on each OS
| OS | Where to look | Notes |
|---|---|---|
| Windows 11 | Settings → System → Display → Display resolution | Look for the (Recommended) tag — that is the native resolution. Avoid 'Scaled' options. |
| macOS | System Settings → Displays → your display → Resolution | macOS hides the native resolution behind 'Default for display'. Click 'More Space' or 'Scaled' to see options. |
| Linux (GNOME) | Settings → Displays → Resolution | Pick the highest option for native. Multi-monitor setups may show 'Join Displays' mode instead. |
| ChromeOS | Settings → Device → Displays → Resolution | Usually matches the panel native. External monitors may default to a lower resolution for battery. |
| iOS / iPadOS | Settings → Display & Brightness → View | Only exposes 'Standard' vs 'Zoomed'. True resolution is hidden from the user. |
| Android | Settings → Display → Display size / Screen resolution (Samsung only) | Most Android phones hide the actual resolution. Use this page to detect it. |
Why web developers care about all this
If you build websites, you have probably noticed that the same page can look different on different monitors even at the same viewport size. That is because the browser renders at CSS pixels, but the actual rendered output depends on the DPR. A 12-pixel font at DPR 1 is rendered with 12 physical pixels — small but readable. At DPR 2, the same 12 CSS pixels become 24 physical pixels, which is much sharper on a high-density screen. This is why Apple's Retina displays look so much crisper than non-Retina displays at the same CSS resolution.
Responsive web design uses viewport size (in CSS pixels) to decide layout breakpoints. The viewport is what the window.innerWidth and window.innerHeight properties report — what this page shows in the first card. Screen resolution, by contrast, is what window.screen.width and window.screen.height report — useful for detecting multi-monitor setups but rarely used for layout decisions.
Frequently asked questions
More display tests
Refresh Rate Test
Measure your monitor's actual Hz, not just what the OS reports.
UFO Test
Visual motion blur test with multiple UFOs at different speeds.
Dead Pixel Test
Full-screen colour cycle to spot dead, stuck or hot pixels.
FPS Test
Real-time browser FPS counter with frame-time histogram.
Polling Rate Test
Measure your mouse polling rate (125/500/1000/4000/8000 Hz) in the browser.
Input Lag Test
Estimate display + input latency with a click-to-flash reaction test.