Viewport

Viewport refers to the visible area of a webpage or app on a user’s device screen. In web design, the viewport is controlled by the browser and can change based on the device’s screen size or orientation. Designers use the viewport meta tag to ensure that content is properly scaled and displayed on different devices, enhancing responsiveness and usability.

The viewport meta tag is the single line of HTML that makes the difference between a web page that renders correctly on mobile and one that appears zoomed-out and tiny. Missing it is one of the most common reasons web apps look broken on phones — it's also a Google ranking factor for mobile search. For SaaS products with any mobile usage, understanding how viewport units (vw, vh) and the visual viewport work is essential for designing full-screen layouts and modal interactions correctly.

When Airbnb redesigned their mobile booking flow, they used viewport height units (vh) to ensure that critical CTAs like 'Book' were always visible above the fold on any screen size — preventing the frustrating experience of having to scroll to find the primary action on smaller devices.