Viewport Size & Responsive Breakpoint Tester

The viewport is the area a web page has to draw into — your browser window minus the tabs, address bar, and scrollbars. That is why it is almost always smaller than your screen resolution: the screen is the whole panel, while the viewport is just the slice the page can use. It is measured in CSS pixels, layout units rather than physical dots — high-density 'Retina' displays pack two or three physical pixels into each CSS pixel so text looks sharper, and window.devicePixelRatio reports that multiplier.

This tool reads window.innerWidth and window.innerHeight on every resize and orientation change, alongside the layout viewport from documentElement.clientWidth/clientHeight, your device pixel ratio, and orientation. A breakpoint is a viewport width at which a layout changes — columns stack, a menu collapses, type resizes — and frameworks such as Tailwind CSS apply styles from a set of named widths upward. The reference below highlights the range your width falls into, and the draggable test panel reports the breakpoint its own width would hit, so you can preview a component without resizing your whole window. Everything runs locally; nothing is uploaded.

If the numbers look off, several things sit between your panel's resolution and the viewport a page sees. Browser chrome and scrollbars subtract from the usable area, and page zoom shrinks the CSS-pixel count — so innerWidth drops without the window moving — as does OS display scaling, which is why two identical monitors can report different sizes. On phones the meta viewport tag, <meta name="viewport" content="width=device-width, initial-scale=1">, lays the page out at device width instead of faking a ~980px desktop, so a 390-px viewport at DPR 3 sits on a panel roughly 1170 physical pixels across. To see your screen's full physical resolution and pixel density, use the What Is My Screen Size and Screen Resolution Test tools.

Common responsive breakpoints