Your screen resolution, right now
The big number up top is your screen resolution: screen.width × screen.height. That’s what most people mean when they ask “what’s my resolution.” Below it sit the values that matter once you’re building something responsive: the browser viewport, your device pixel ratio, the usable area minus the taskbar, and color depth.
Here’s the part that catches people off guard. Resolution and viewport are almost never the same number, and on a modern laptop neither one matches the pixel count on the spec sheet. Three measurements, three uses. Let’s untangle them.
Resolution vs viewport vs pixel ratio
These three get mixed up constantly, so here’s the plain version.
Screen resolution is the whole display. A 27-inch monitor might report 2560 × 1440. It doesn’t change when you resize the browser window, because it describes the screen, not your tab.
Viewport is the slice of the page your content actually gets. That’s window.innerWidth × innerHeight, and it shrinks the second you open dev tools, drag the window narrower, or split your screen with another app. Media queries fire off this value, not the resolution. Resize this window and watch the viewport card update while the resolution stays put.
Device pixel ratio (DPR) is the multiplier between CSS pixels and physical pixels. On a standard display it’s 1. On a Retina screen it’s usually 2, sometimes 3 on phones. A DPR of 2 means every CSS pixel you style is painted with a 2 × 2 block of real pixels, which is why text looks razor sharp and why a “1440-wide” MacBook is secretly pushing 2880 pixels across.
So the chain is simple: physical pixels divided by the DPR gives the CSS pixels that resolution and viewport report. The effective-resolution card runs it backwards (screen.width × DPR) to show the real grid.
Why the numbers surprise people
Plug a 4K monitor into a Windows laptop set to 150% scaling and your reported resolution drops to something like 2560 × 1440, not 3840 × 2160. The OS scaling factor folds into the DPR. Same physical panel, different reported numbers, depending on a setting buried in display preferences.
Phones are even sneakier. An iPhone might have a 1170-pixel-wide panel but report a viewport around 390 CSS pixels, because its DPR is 3. Design to the CSS width, ship images at the physical width. That gap is exactly what srcset and the 2x descriptor exist to bridge.
The available screen (availWidth / availHeight) is the odd one out. It trims off space the OS reserves for the taskbar, dock, or menu bar, so it tells you how far a maximized window can grow. Useful when you’re positioning a popup.
Good to know
The viewport listener stays live. It rebinds on resize and orientationchange, so dragging a window or rotating a tablet updates the values without a refresh. Copy summary dumps every reading as plain text, formatted for a bug report or a quick Slack message. And all of it reads locally through standard browser APIs, so no measurements leave your machine.
Questions people ask
Why doesn’t my resolution match my monitor’s spec sheet?
Display scaling. If your OS is set above 100% (common on 4K and Retina), the browser reports CSS pixels, which is the physical count divided by the scale factor. Check the effective-resolution card to recover the hardware number.
What’s the difference between resolution and viewport?
Resolution is the full screen and stays fixed. The viewport is the area your web page renders into, and it changes whenever you resize the window or open a side panel. Responsive breakpoints react to the viewport.
Is device pixel ratio the same as zoom?
Not quite, though they interact. DPR reflects the display’s physical density plus OS scaling. Browser zoom (Ctrl and +) layers on top and will nudge devicePixelRatio as you zoom, which is why the number sometimes lands on values like 1.25 or 1.5.
What viewport size should I target for mobile?
A width around 360 to 414 CSS pixels covers most current phones. Don’t design to the raw hardware pixel count. Use the CSS viewport width here as your reference and let srcset handle the high-density images.
Does color depth still matter?
For everyday work, rarely. Almost every screen reports 24-bit (8 bits each for red, green, blue). It’s worth a glance if you’re chasing banding in gradients or targeting HDR, where higher depths come into play.
Will this update if I rotate my phone?
Yep. There’s an orientationchange listener alongside the resize one, so the viewport and orientation flip the moment you turn the device.