Viewport
The viewport is the visible area of a page in the browser window, the part a visitor sees before scrolling. On a phone it is set by a meta tag: without it, the browser lays the page out as if it were a desktop screen and zooms out, which is how a site ends up unreadable on a phone.
By Théophile Louvart, founder of Porteur · Updated 15 September 2026 · Markdown
The tag, and what happens without it
<meta name="viewport" content="width=device-width, initial-scale=1">- width=device-width lays the page out at the real width of the device.
- initial-scale=1 starts at normal zoom rather than zoomed out.
- Without the tag, most phone browsers assume a wide desktop viewport and scale the whole page down, so text is tiny and links are hard to tap.
- Avoid user-scalable=no and a maximum-scale below 5: they stop a visitor zooming, which is an accessibility failure Lighthouse flags.
Why it decides your Core Web Vitals
Above the fold means inside the viewport at first paint. Two metrics are defined by it.
| Metric | How the viewport defines it |
|---|---|
| Largest Contentful Paint | The largest element inside the viewport, usually the hero image or the heading |
| Cumulative Layout Shift | Shifts are measured as a fraction of the viewport, so the same jump costs more on a phone |
That is why an image that is fine on a laptop can be the LCP element on a phone: the viewport is smaller, so a different element is the largest thing in it.
The units, and where they trip you
- vw and vh are one per cent of the viewport width and height.
- On phones, 100vh includes the space under the browser’s toolbars, which is why full-height sections overflow; dvh, svh and lvh were added for this.
- A layout with a min-width wider than the screen causes horizontal scrolling, which Lighthouse reports as content wider than the viewport.
- Test at 390 pixels wide, which is a common phone width, not only in a desktop window made narrow.
Questions
It tells a phone browser to lay the page out at the device width rather than assuming a desktop screen and zooming out. Without it, a responsive layout never applies.
Indirectly and strongly. Google indexes the mobile version, and mobile usability is part of page experience. A page that renders zoomed out is a page that fails for the crawler and the visitor alike.
No. user-scalable=no stops people enlarging text, which is an accessibility failure and is flagged in audits. Let visitors zoom.
Inside the viewport at first paint, before any scrolling. It differs by device, which is why the largest element on a phone is often not the largest on a laptop.
Because 100vh includes the area behind the browser toolbars. Use dvh for the dynamic height, or set a minimum height that tolerates the toolbars.
Check my site, free
The free check loads your home page as a phone does and names what slows or shifts it, in about thirty seconds.
- Free check, no card
- Read-only, your own accounts
- Readable by your agent