Screen Resolution Test

People say "screen resolution" to mean one thing, but a browser sees several. There is the whole display, the part of it your browser window occupies, and the part of that window where the page can actually draw. The numbers above separate them so you can see exactly how much room a website really has to work with.

The two figures that matter day to day are screen resolution, the full size of your display, and the viewport, the live drawing area inside the browser. Responsive websites almost always design against the viewport, because that is the space they control. Watch the viewport figure change as you drag the window edge; the screen resolution above it will not move.

The device pixel ratio is the bridge between the pixels a web page talks about and the physical pixels on your screen. On a classic display the two are the same and the ratio is 1. On a high-density screen, a phone, a Retina laptop, a 4K monitor at a scaled setting, several physical pixels are packed into every CSS pixel, giving a ratio of 2, 3 or a fractional value in between.

This is why your reported resolution can look smaller than the specification you bought. A "3840 × 2160" panel running at a 2× ratio reports 1920 × 1080 to web pages, because that is the layout size, while still drawing with the full four-times pixel count for crisp text. The tool multiplies the two out for you on the physical-pixels row, which is the figure to quote when you are checking a wallpaper size or a capture resolution. The device pixel ratio test isolates this value on its own.

Zoom is folded into the pixel ratio, which surprises people. Press Ctrl and plus a few times and window.devicePixelRatio moves with the zoom level: on an ordinary 1× display, 110 percent zoom reports about 1.1, and 150 percent reports 1.5. At the same time the viewport in CSS pixels shrinks, which is why a zoomed page lays out as though the window were narrower.

Operating-system scaling does the same thing from the other direction. Windows at 125 percent scaling on a standard monitor reports a ratio of 1.25, and the browser then lays out at four-fifths of the physical width. Pinch-zoom on a touch screen is different again: it scales the visual viewport without changing the layout viewport or the pixel ratio, so the numbers above will sit still while the page appears to grow.

Designers and developers reach for this test constantly, to reproduce a layout bug at a specific viewport, to confirm a media query is firing, or to check how a mockup maps onto real hardware. If you are filing a bug report, the viewport size, the pixel ratio and the exact browser version are the three details that let someone else reproduce what you saw.

It is just as handy outside development. Setting up a second monitor, choosing a wallpaper at the right resolution, checking why a video will not play at full quality, or confirming that a scaling change actually took effect, all come down to the numbers on this page. When a screen looks blurry or unusually large, the pixel ratio row usually explains it: a display running at the wrong scaling setting reports a ratio that does not match its hardware.

Your screen dimensions are freely readable by any website, no prompt required, and they are among the first values a fingerprinting script reads. For most people that is harmless, since plenty of visitors share the same common resolutions. But an unusual size, a fractional pixel ratio, or a multi-monitor setup that produces odd available-screen values can make your browser stand out, and standing out is exactly what fingerprinting relies on.

The safest position is the common one: a standard resolution at a whole-number ratio with the browser near its defaults. Resizing the window before a capture or running an unusual zoom does not protect you, it only changes one value while the rest of your profile stays put.