# 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.

Updated 2026-09-15 · Source: https://porteur.ai/glossary/viewport

## The tag, and what happens without it

```html
<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.

> Google indexes the mobile version of pages, so the viewport is what its crawler renders with. A missing tag is not a cosmetic problem.

## 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

### What does the viewport meta tag do?

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.

### Does the viewport affect SEO?

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.

### Should I disable zooming on my site?

No. user-scalable=no stops people enlarging text, which is an accessibility failure and is flagged in audits. Let visitors zoom.

### What does above the fold mean exactly?

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.

### Why does 100vh overflow on a phone?

Because 100vh includes the area behind the browser toolbars. Use dvh for the dynamic height, or set a minimum height that tolerates the toolbars.

## Read next

- [Mobile-friendly](https://porteur.ai/glossary/mobile-friendly): What mobile-friendly means after Google retired its test, how to check with Lighthouse and Core Web Vitals, and fixes for small sites.
- [Mobile-first indexing](https://porteur.ai/glossary/mobile-first-indexing): Mobile-first indexing means Google uses your mobile page to crawl, index and rank. Here is what it hides on desktop-only pages and how to fix it.
- [Largest Contentful Paint (LCP)](https://porteur.ai/glossary/largest-contentful-paint): Largest Contentful Paint is when the biggest element appears. Aim under 2.5 s. See how to measure it, usual causes on small sites, and quick fixes.
- [Cumulative Layout Shift (CLS)](https://porteur.ai/glossary/cumulative-layout-shift): Cumulative Layout Shift is how much a page moves while loading. Keep CLS at or below 0.1. Here is how to measure, find causes, and fix them.
- [Mobile page speed: the version of your site that Google reads](https://porteur.ai/guides/mobile-page-speed): Run a mobile page speed test the way Google reads your site. See field vs lab, why phones are slower, the key fixes, and how to verify on a real device.
- [How to fix cumulative layout shift, cause by cause](https://porteur.ai/guides/how-to-fix-cumulative-layout-shift): See how CLS is measured, find the shifting elements, fix each common cause, and check field data after 28 days to confirm it worked.
- [Core Web Vitals](https://porteur.ai/glossary/core-web-vitals): Core Web Vitals are Google’s three field speed and responsiveness metrics. See their thresholds, lab versus field, how to read them, and what to fix.

The free check loads your home page as a phone does and names what slows or shifts it, in about thirty seconds. Free check: https://porteur.ai/