Screen resolution checker
See your screen size, viewport, and pixel ratio.
Viewport
—
The usable browser window area (what your page actually gets).
Screen
—
Your display's logical resolution as reported by the browser.
Pixel ratio
—
Physical pixels per CSS pixel. 1 = standard; 2+ = Retina / high-DPI.
- Physical pixels
- —
- Available screen
- —
- Document client
- —
- Color depth
- —
- Color gamut
- —
- Orientation
- —
- Touch points
- —
Values update when you resize the window or rotate your device.
About this tool
Your screen has a physical size in pixels, but your browser rarely gets to use all of them, and the number designers actually build against — the viewport — is smaller still. This tool shows every relevant measurement at once: physical screen resolution, the browser window's inner size, device pixel ratio, colour depth, colour gamut, orientation, and user-preference flags like dark mode and reduced motion. Every value updates the instant you resize the window or rotate your device, so you can watch a breakpoint trigger without opening devtools.
The figure that confuses people most is device pixel ratio (DPR). A modern "Retina" or high-DPI display packs two or more hardware pixels into the space of one CSS pixel — the unit your layout is written in. So a laptop that advertises 2880×1800 hardware pixels reports a 1440×900 CSS resolution at DPR 2, because the browser is drawing everything at double density for sharpness. That's why "my screen is 4K but my website thinks it's 1080p" is normal, not a bug.
Use it to reproduce a layout bug a user reported ("it breaks on my phone"), to confirm a responsive breakpoint fires at the width you expect, or to check whether a display is running in an HDR-capable wide colour gamut. Everything is read from your own browser and nothing is sent anywhere — the readout is purely local.
How to use this tool
-
Open the page
Your screen, viewport, and device pixel ratio appear immediately. Nothing to click — the numbers are read from the browser the moment the page loads.
-
Resize the window
The viewport values update live as you drag the window edge. The screen values do not — they describe your physical display, which doesn't change when you resize the browser.
-
Copy any value
Useful for filing bug reports against responsive layouts, picking image sizes for
<img srcset>, or sanity-checking what your CSS is actually seeing at a given breakpoint.
Frequently asked questions
Screen size and viewport are different — why?
Screen size is your whole display. Viewport is the area your browser window currently occupies, minus the address bar, bookmarks bar, and scrollbars. Responsive CSS breakpoints trigger on viewport width, not screen width.
What is device pixel ratio?
The number of physical pixels your device packs into one CSS pixel. A Retina display typically has a ratio of 2 or 3, so a "100px" CSS box is actually 200 or 300 hardware pixels wide. That's why text and images look sharp even when the logical resolution is small.
Why does the screen size differ between browsers?
Different browsers handle system-level scaling differently — and some report your monitor's physical resolution while others report the scaled one. Mobile browsers often lie about the viewport deliberately to make desktop-designed sites render reasonably.
Why does my screen say 2880×1800 but my viewport is 1440×900?
You're on a high-DPI display (Retina or similar). The OS scales the desktop 2× so UI elements stay readable at small physical sizes. CSS sees the logical resolution (1440×900); the panel has twice that in physical pixels. Device pixel ratio is the multiplier between them.
What's a 'CSS pixel'?
The unit your CSS measures in. A 1px border is one CSS pixel. On a high-DPI display, one CSS pixel might be 2 or 3 physical pixels — the browser handles the multiplication. CSS pixels stay roughly constant in physical size across devices; that's the whole point.
Troubleshooting
- My screen is 4K but the tool shows 1920×1080 or similar
That's device pixel ratio at work. The tool reports
CSS pixels— the unit your browser lays pages out in — not raw hardware pixels. At DPR 2, a 3840-pixel-wide panel is a 1920 CSS-pixel canvas. Multiply the reported width by the DPR figure shown to get the hardware resolution.- The viewport width doesn't match my window width
Three usual culprits: a vertical scrollbar eating 15–17 pixels, browser zoom set above or below 100%, or OS display scaling (common on Windows laptops at 125% or 150%). Reset zoom to 100% with
Ctrl+0and the numbers should line up.- Both my monitors report the same resolution
The browser reports the display the window currently sits on, not all of them. Drag this window fully onto the other monitor and the values update to that screen. Spanning the window across both won't combine them.
- Values don't change when I rotate my phone
Either orientation is locked in your device settings, or you're in an in-app browser (inside Instagram, Facebook, or a messaging app) that can report stale values. Open the page in your system browser — Safari or Chrome — and rotate again.