The viewport is the part of a web page you can actually see at one moment: the rectangle inside the browser window on a laptop, or the screen area on a phone. The page itself can be far longer or wider; the viewport is the window you look through as you scroll.
How browsers decide the viewport size
On a desktop, the viewport is simply the inner size of the browser window, which changes when you resize it. Phones are trickier. When the iPhone launched, most sites were built for desktops, so mobile Safari pretended the screen was 980 CSS pixels wide and shrank the page to fit. Other mobile browsers copied that behaviour, and it still happens today unless a page opts out.
The opt-out is one line in the page's head:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to make the layout width match the device's width in CSS pixels (often around 390 on a modern phone) and to start without zoom. Without it, media queries for small screens never fire, because the browser believes it is 980 pixels wide.
Viewport units in CSS
CSS can size things against the viewport directly. 100vw is the full viewport width and 100vh the full height. On phones, 100vh caused trouble because the address bar slides in and out, so newer units were added: svh (small, with bars showing), lvh (large, bars hidden) and dvh (dynamic, updates as bars move). A full-screen hero set to 100dvh no longer has its button hidden under the browser toolbar.
Example: a salon booking page
A salon's old site looks fine on a laptop, but on phones the text is tiny and visitors pinch to zoom. The fix is often just the missing viewport tag plus a few small-screen styles. Google also flags this: Lighthouse reports a missing or misconfigured viewport tag as a problem.
When this matters for you
If your site was built in the last several years with a modern tool, the tag is almost certainly there. Check it if the mobile version looks like a shrunken desktop page, or if the site was hand-built or migrated from an old theme.
Viewport mistakes to avoid
- Adding
user-scalable=noormaximum-scale=1. It blocks pinch zoom, which hurts visitors with low vision. - Using
100vhfor mobile heroes. Content at the bottom can end up hidden behind browser bars; trydvhorsvh. - Setting fixed widths like 1200px. Anything wider than the viewport creates sideways scrolling on phones.
- Judging the fold by one screen. Viewport heights vary widely, so above the fold is a range, not a line.
Related terms
- Responsive design: layouts that adapt to the viewport.
- Media queries: CSS rules triggered by viewport size.
- Above the fold: what fits in the first viewport.
- Web browser: the software that defines the viewport.