What's my viewport size?

Live readout of the size your page is actually rendering in. Resize the window: the numbers update.

Embed this tool on your site

Viewport width
Viewport height
Device pixel ratio
Screen width × height
Orientation
Active breakpoint guess

What is a viewport?

The viewport is the visible area of a web page in the browser. It is sized by the device or window, and the reference point most layout, screenshots, and responsive design behavior depends on. It is not the same as the screen: the screen is the physical display; the viewport is whatever is left after browser chrome and address bars.

When this number matters

Layout bugs are almost always viewport-dependent. "The menu wraps badly" means nothing without the width it wrapped at. A useful bug report names the viewport size next to the screenshot, or skips the bookkeeping by using a tool that stamps it automatically. See the viewport definition and the design review workflow.

Common responsive breakpoints

There is no universal standard. Tailwind defaults: 640, 768, 1024, 1280, 1536. Bootstrap defaults: 576, 768, 992, 1200, 1400. Material UI: 600, 900, 1200, 1536. The breakpoint label above is a rough guess against the Tailwind values.

Capturing layout bugs across viewports?

Cobalt Capture stamps the viewport size onto every screenshot you publish, so the bug report never loses the geometry. No install. Free.

Start capturing