Viewport

The viewport is the visible area of a page in the browser window on a given device — the rectangle in which content is rendered before the user starts scrolling. Its size depends on the screen and the window: it is different on a desktop monitor, a tablet and a phone. The viewport's dimensions determine how much content is visible at once and how the responsive layout arranges itself.

The meta viewport

On mobile devices, the meta viewport tag in the page code plays a key role. Without it, phone browsers assume a wide virtual screen and shrink the whole page, forcing the user to zoom and scroll sideways. Setting the meta viewport so that the width matches the device width makes the page render at real scale and lets the layout respond correctly to the available space.

Viewport, responsiveness and UX

The viewport is the foundation of responsive design: CSS rules, including media queries and viewport-relative units, allow sizes, columns and spacing to adapt to the available space. Handling the viewport correctly directly affects UX — the readability of content, the comfort of touch areas and the absence of manual zooming. It also relates to Core Web Vitals: a poorly defined viewport or elements that exceed its width cause layout shifts and worsen the experience. When designing a site, it is worth testing it at various viewport sizes to be sure the content stays readable and usable regardless of the device.