Screen Resolution Explained: CSS Pixels, DPR, and Viewports
Why your 4K monitor reports 2560×1440, what device pixel ratio actually does, and how to check responsive breakpoints live — without DevTools.
Open the What Is My Screen Resolution checker on a 4K monitor and there’s a decent chance it says 2560 × 1440. Or 1920 × 1080. The panel has 3840 × 2160 physical pixels — you paid for them — yet the browser reports something smaller. Nobody is lying to you. They’re just counting different things.
CSS pixels are not hardware pixels
When displays got dense, operating systems started scaling the interface so text stayed readable. Windows at 150% scaling, macOS on any Retina screen — both tell the browser a comfortable, scaled-down number called CSS pixels. A 27-inch 4K monitor at 150% reports 2560 × 1440. A MacBook Air’s 2560 × 1664 panel reports 1280 × 832.
The bridge between the two numbers is the device pixel ratio: physical pixels per CSS pixel. At DPR 2, one CSS pixel is drawn with a 2 × 2 block of hardware pixels, which is why text on a Retina screen looks carved rather than printed. Phones push this to 3. The tool shows your DPR and multiplies it back out, so you can see both the number your sites work with and the number on your monitor’s box.
This is also why screenshots come out “too big”. Screenshot tools capture physical pixels, so on a scaled display the file is 1.5× or 2× larger than the desktop appears.
Resolution, available screen, viewport — three different rectangles
From largest to smallest:
- Screen resolution: the whole display, in CSS pixels
- Available screen: what’s left after the OS takes its cut — a standard Windows taskbar turns 1920 × 1080 into 1920 × 1040
- Viewport: the part of your browser window a page can actually draw into, minus toolbars and scrollbars
Responsive design only ever reacts to the third one. A media query like min-width: 768px doesn’t care that you own an ultrawide; it cares how wide the window is right now. That’s why a “mobile” layout can appear on a 34-inch monitor — you just narrowed the window past a breakpoint.
The checker updates live as you resize, which makes it a quick way to find the exact pixel where a site snaps to its tablet layout. Drag, watch the viewport number, done. Tailwind’s defaults, for reference: 640, 768, 1024, 1280, 1536.
What the numbers look like in the wild
StatCounter’s worldwide figures for 2025 put 1920 × 1080 first on desktop at roughly a fifth of all traffic, with 1366 × 768 still hanging on years after laptop makers stopped shipping it. On phones the most common report is 360 × 800 — which sounds tiny until you remember that’s CSS pixels on a DPR-3 device, so the glass itself is 1080 × 2400.
Two things I check with this page regularly: whether an external monitor actually negotiated its native resolution (docking stations love to silently fall back to 1080p), and what DPR a particular laptop reports before I chase a blurry-image bug that turns out to be a missing 2× asset.
Color depth, briefly
Almost every screen reports 24-bit color — eight bits each for red, green, and blue, about 16.7 million shades. Some HDR panels report 30. If you see 24, nothing is wrong; that’s the standard the web is built around.
Read locally, sent nowhere
Everything on the page comes from your browser’s own window and screen objects, read by JavaScript and displayed in place. No request leaves your device, and the page keeps working with Wi-Fi off.
Check What Is My Screen Resolution now — and next time a bug report asks for your resolution, DPR, and viewport size, copy them from one place.