What is a viewport?
On a desktop, the viewport is the browser window minus its toolbars; resize the window and the viewport changes. On a phone, it is the screen, less the browser's address bar and controls, which grow and shrink as the visitor scrolls. Everything a responsive layout does is a reaction to the viewport: its width decides which layout applies, its height decides what sits above the fold, and CSS units such as vw and vh are measured as fractions of it.
Phones complicated the idea. When the iPhone launched in 2007, most sites were built for desktops, so mobile browsers pretended to be about 980 pixels wide and shrank the page to fit. The viewport meta tag was introduced to switch that off. A single line in the page's head, setting the width to the device width, tells the phone to show the page at its real size, and without it no responsive design can work properly on mobile.
Why it matters
Why a viewport matters
Design happens in the viewport. It is the frame through which visitors see everything, and it varies more than most teams plan for: from a small phone held upright to an ultrawide monitor, with tablets, laptops and folding phones in between. A layout that ignores that range will look right on the designer's screen and wrong on most others. A missing viewport tag is still one of the most common reasons a site looks tiny and unusable on phones, and misused viewport units are behind the hero sections that jump or get cut off when a phone's address bar moves.
In practice
How a viewport works in practice
- 01
Every page we build starts with the standard viewport tag, width set to the device width and initial scale set to one, and never with settings that disable zooming, which takes control away from people who need to enlarge text. Layouts respond to the viewport's width through media queries, while component-level changes increasingly respond to the space each element is given, through container queries.
- 02
Height needs more care. On phones the classic vh unit is measured against the largest possible viewport, so a section set to full height can hide its bottom edge behind the toolbar. The newer units fix this: svh for the smallest viewport, lvh for the largest and dvh for the one that changes as toolbars move. We use them for full-screen sections, test on real phones in both orientations and watch how the page behaves as the address bar appears and disappears.
Watch out
What people get wrong about viewports
Designing for one viewport, usually the designer's laptop, and treating every other size as an adjustment. Second, disabling zoom in the viewport tag to stop layouts shifting, which fails accessibility guidelines and frustrates anyone with low vision. Third, building full-height sections on vh and finding the button at the bottom of the hero hidden behind a phone's toolbar for half the audience. And forgetting landscape: a phone turned sideways has a viewport only a few hundred pixels tall, where a fixed header can swallow half the screen.
