Screen Resolution Tester

This reads and displays, live, the numbers a browser actually exposes about the screen it is running on: viewport width and height, screen resolution, device pixel ratio and which CSS breakpoint the current width falls into. Resize the browser window and every figure updates immediately, which makes it useful for checking how a layout behaves at a specific width without needing browser dev tools open.

Viewport vs screen resolution

Screen resolution is the full physical display — every pixel the monitor has. Viewport is what CSS media queries actually see: the browser window's content area, with browser chrome, the OS taskbar, and any visible scrollbar already subtracted. The two numbers are rarely the same, which is why the viewport is almost always meaningfully smaller than the screen it is displayed on.

Device pixel ratio

Device pixel ratio is how many physical screen pixels make up a single CSS pixel. A ratio of 1 means they are the same. A ratio of 2, common on modern laptop and phone screens, means a viewport reported as 1440 pixels wide is rendered across 2880 actual physical pixels — which is exactly why images need to be supplied at 2× their CSS display size to look sharp rather than blurry on those screens.