"What resolution is my screen" and "how big is the space a webpage actually has to work with" sound like the same question, but they're measuring two genuinely different things — and a third number, pixel ratio, complicates it even further.
Screen Resolution Isn't What a Webpage Sees
Screen resolution describes your entire physical display's total pixel dimensions — the whole monitor or laptop screen, regardless of how many windows or browser tabs are open. The browser viewport, by contrast, is only the portion of that screen actually available for a webpage to render into, after subtracting the browser's own toolbars, tabs, bookmarks bar, and window chrome. A 1920×1080 screen might only give a maximized browser window a viewport closer to 1920×950 once all that surrounding interface is subtracted — and it shrinks further if the browser isn't maximized at all.
What Device Pixel Ratio Actually Measures
Device pixel ratio (DPR) is the relationship between physical pixels on the actual display hardware and the "CSS pixels" a webpage's code refers to. A ratio of 1 means one physical pixel per CSS pixel — a direct match. A ratio of 2, common on high-density "Retina"-style displays, means the screen physically packs a 2×2 grid of real pixels into the space treated as a single CSS pixel, which is what makes text and images render so much sharper on those displays without any extra effort from a website's code.
Why a "Pixel" in CSS Isn't a Real Pixel
This is the part that surprises a lot of people: when a stylesheet says an element is "16px" wide, that's a CSS pixel — a fixed reference unit standardized to look a consistent physical size across devices, not a literal single dot on the screen. On a high-DPR display, that same "16px" is actually rendered using many more physical pixels than 16. This abstraction exists specifically so that text and layouts look a comparable size on both an old low-density monitor and a modern high-density laptop screen, rather than shrinking to an unreadable size on denser displays.
Using Viewport Size to Test Responsive Design
Because the viewport size updates live as you resize a browser window, it's a genuinely useful way to sanity-check a responsive website's layout breakpoints without needing dedicated device-testing software. Watching the viewport width tick down while a page's layout is supposed to switch from a multi-column to single-column view, for instance, tells you exactly what width that breakpoint actually triggers at in your current browser.
Check Your Own Numbers
See your screen resolution, browser viewport, device pixel ratio, and color depth instantly — updating live as you resize — with the free Screen Resolution Checker. No sign-up, and nothing is sent to a server.
FAQ
What's the difference between screen resolution and viewport size? Screen resolution is your entire monitor or display's total pixel dimensions. Viewport size is just the visible browser window area actually available for a webpage, which is smaller once you subtract the browser's toolbars, tabs, and any other chrome around the page.
What does the device pixel ratio mean? It's the ratio between physical device pixels and CSS pixels. A ratio of 2, common on high-density "Retina"-style displays, means the screen packs 2×2 real pixels into the space of what a webpage treats as a single CSS pixel, producing sharper text and images.
Why do these numbers update if I resize my browser window? The viewport size specifically reflects your current browser window, so it updates live as you resize the window — this is useful for testing how a responsive website design behaves at different widths.
Is any of this sent to a server? No — every value shown is read directly from your own browser using JavaScript, and none of it is ever sent anywhere.