What Is Screen Resolution?

I've had this conversation with developers who've been writing CSS for years and still mix these up under pressure. You're debugging a responsive layout, things look wrong, and the first instinct is to check the screen resolution. But that's usually not the number that matters. The viewport is what the browser actually gives your page to work with, and it's almost always smaller than the screen resolution because browsers don't open maximized by default on desktops, and on mobile they've got address bars, toolbars, and system UI eating into the available space. Knowing which number to trust saves you from chasing the wrong problem.

Three numbers that get confused constantly

Screen resolution — the display's total physical pixel count, full stop, regardless of what's currently open on screen. Your monitor's spec sheet says this number. It doesn't change. If you bought a 1080p monitor, it's 1920×1080 whether you're running a single browser tab or four applications side by side.

Viewport size — the visible area inside the browser window after subtracting toolbars, tabs, and system chrome. This is the number CSS media queries actually respond to when deciding which styles to apply. It changes constantly. Resize your window, rotate your phone, zoom in or out, collapse the bookmarks bar — the viewport shifts every time. On mobile, the viewport can even change mid-session if the browser UI auto-hides while you're scrolling.

Device pixel ratio (DPR) — how many physical pixels get used to draw one single CSS pixel. A DPR of 2, common on Retina displays and plenty of higher-end Android phones, means content renders at double the sharpness of a DPR-1 display showing the exact same CSS-pixel size, without the layout itself changing at all. A DPR of 3 is common on newer high-end phones. This is why icons and text look crisp on a modern phone despite the CSS pixel dimensions being similar to what you'd see on an old desktop monitor — there are more physical pixels behind each CSS pixel, making everything sharper.

The relationship between these three numbers is what makes responsive design work, and it's also what makes it confusing when you're first getting comfortable with it. Two phones can report an identical viewport width in CSS terms while their actual screen resolutions are quite different from each other — that's DPR doing exactly what it's designed to do, rendering things sharper on higher-density screens without changing how much layout "space" the page believes it has to work with. It's also exactly why responsive design targets viewport size rather than raw resolution; designing against raw resolution numbers would mean chasing a moving target every single time a new device with a different pixel density ships.

I remember a project where someone on the team kept insisting we needed a media query at 1080px because "most phones have 1080p screens now." The breakpoints never triggered where expected on those phones, because the CSS viewport width was 360 or 393 or 412, not 1080. The 1080 was the physical pixel count, not the CSS pixel count. Once we explained the difference, the media queries made sense and the layout issues stopped.

What's common right now

Full HD (1920×1080) is still the most common desktop monitor resolution by a wide margin as of 2026, with QHD (2560×1440) and 4K (3840×2160) increasingly common on newer hardware, particularly among people who've upgraded in the last couple of years. Most desktop browsers run at DPR 1 unless you've got a high-density display, which means the viewport width in CSS pixels roughly matches the screen width divided by the device's scaling factor. On Windows, this is often further complicated by display scaling settings — a 4K monitor at 150% scaling might report a viewport width that feels like a 2560×1440 display, even though the raw pixel count is 3840×2160.

Mobile varies quite a bit by device and manufacturer, but commonly lands somewhere in the 1080×2340 to 1440×3200 range at high DPR, depending on the specific phone. The iPhone 15 Pro, for instance, has a physical resolution of 1179×2556 but reports a CSS viewport of 393×852 at DPR 3. A Samsung Galaxy S24 reports a physical 1080×2340 but a CSS viewport of 360×780 at DPR 3. Same-ish physical pixel counts, different CSS pixel counts, different DPR values — this is exactly why you check the actual viewport instead of assuming based on the phone's spec sheet.

It's worth noting that these numbers shift over time as new devices ship and older ones fade out of circulation. The exact most-common resolution in any given month isn't particularly important — what matters is understanding the relationship between resolution, viewport, and DPR so you can test effectively regardless of which specific device someone is using.

Check your own numbers

The Device Dashboard shows your live screen resolution, viewport size, and DPR side by side, in real time, without needing to dig through your operating system's display settings menu or look up your specific device model online to find a spec sheet. You open the page, and the numbers are there. Resize the window and they update. Rotate your phone and they change. There's no button to press, no configuration step, no waiting for anything to load.

This is useful during development when you're testing breakpoints and want to see exactly what CSS pixel width you're actually at, not what you think you're at based on your monitor's resolution or your phone's marketing materials. It's useful during QA when you need to document what a user's setup looks like. It's useful during debugging when you're trying to figure out why a media query isn't firing where you expected, or why an element is positioned differently than it was five minutes ago.

If you're the kind of person who likes to verify things yourself, you can open your browser's console and run window.screen to see the raw resolution data, or window.innerWidth and window.innerHeight to see the viewport dimensions. The dashboard formats all of this in one place and keeps it updated as things change, which saves you from running multiple console commands every time you resize the window or switch between portrait and landscape.