What is a viewport? Definition for web browsers

The viewport is the visible area of a web page in the browser — sized by the device or window, and the reference point most layout, screenshots, and responsive design behavior depends on.

The viewport is the visible area of a web page in the browser — sized by the device or window, and the reference point most layout, responsive design, and screenshot behavior depends on.

It is not the same as the screen. The screen is the physical display; the viewport is whatever area is left over after browser chrome, system bars, and any toolbars. On a mobile phone the address bar may grow and shrink as the user scrolls, changing the viewport height while the screen stays the same size.

Where the term shows up in feedback

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 includes a full-page screenshot that records the geometry implicitly.

For accessibility and responsive review, walking the design at a handful of viewport widths (a phone, a tablet, a small laptop, a large desktop) catches most layout regressions before users do. A short capture session at each width produces a single document the design team can review side by side.

Frequently asked questions

How is the viewport different from the screen?

The screen is the physical display. The viewport is the area inside the browser where the page renders — smaller than the screen because of browser chrome, and different again on mobile because of address bars and toolbars.

Why does the viewport size matter in design review?

Because the same page looks different at different viewport widths. A design that works at 1440px may break at 768px. Always note the viewport size when capturing a layout issue.

Capture your first review.

About a minute from open tab to a shareable URL your agent can ingest.

Start capturing