How to Check Your Screen Resolution and Viewport Size Online

Screen resolution sounds like a simple thing to check — but if you've ever tried to reproduce a layout bug, fill in a bug report, or optimize a design for a specific device, you know it's surprisingly tricky to get the full picture fast.

Your operating system shows the physical display resolution. Your browser shows the viewport. Your CSS media queries respond to something slightly different again. Here's what all these numbers mean and how to check them all at once.

Screen resolution vs. viewport size

Screen resolution is the total number of physical pixels on your display — e.g., 1920×1080, 2560×1440, or 3840×2160. This is a property of your hardware and OS settings, and it doesn't change as you resize your browser window.

Viewport size is the area of the browser window where content is rendered. It changes when you resize the browser, zoom in or out, or dock the browser to the side of the screen. This is what CSS media queries respond to — not the screen resolution.

Device pixel ratio (DPR) is the ratio of physical pixels to CSS pixels. Retina and HiDPI displays have a DPR of 2 or 3, meaning each CSS pixel maps to 4 or 9 physical pixels. This affects how sharp images appear and why you need @2x assets.

Why this matters for web development

When a user reports "the layout looks broken on my screen", knowing their viewport size lets you reproduce the issue immediately. Without it, you're guessing breakpoints.

Similarly, when designing responsive layouts:

• CSS breakpoints like min-width: 768px respond to the viewport, not the screen.
• A user on a 1920px monitor with the browser at half-width has a ~960px viewport.
• A user on a MacBook Pro 16" retina has a 3456×2234 physical resolution but a much smaller CSS pixel viewport.

How to check your screen size quickly

The fastest way is the My Screen Size tool on UtilityCove. It instantly shows your current viewport width and height, your full screen resolution, device pixel ratio, and aspect ratio — all with no setup required.

Useful scenarios:

• Filing a bug report — copy the viewport stats in one click.
• Checking whether you're at a common responsive breakpoint.
• Verifying how a design looks at a specific viewport before shipping.
• Testing a site on multiple devices in the same session.

Common screen resolutions in 2025

According to browser usage data, the most common viewport widths are around 1280–1920px on desktop and 360–414px on mobile. The 768–1024px range covers tablets and small laptops. If you're only testing at 1920px, you're likely missing issues that affect a significant portion of your visitors.

Knowing exactly what resolution you're working on — and being able to share that information instantly — makes collaborative debugging and responsive design work dramatically faster.