---
title: "Viewport"
slug: "viewport"
category: "glossary"
tags: ["glossary", "frontend", "css", "responsive-design", "mobile", "layout"]
status: "stable"
last_updated: 2026-05-14
summary: "The viewport is the visible browser area of a page; its dimensions and relation to CSS units are fundamental to responsive design."
related:
  [
    "[[frontend/css]]",
    "[[frontend/html]]",
    "[[frontend/tailwind]]",
    "[[glossary/css-grid]]",
    "[[glossary/css-flexbox]]",
    "[[seo/technical]]",
  ]
---

## Overview

This page is the atomic definition. Responsive design patterns live at [[frontend/css]].

## Definition

The viewport is the rectangular area of the browser window in which a web page is rendered. On desktop it equals the browser chrome minus toolbars; on mobile it is more complex. Mobile browsers use a layout viewport (typically 980 px wide) for legacy compatibility and a visual viewport that matches the device screen. The `<meta name="viewport" content="width=device-width, initial-scale=1">` tag instructs the browser to set the layout viewport to the device width, which is required for responsive CSS to work. CSS viewport units: `vw` (1% of layout viewport width), `vh` (1% of layout viewport height), `dvh` (dynamic viewport height, updates when browser UI appears or disappears), `svh` (small viewport, always the smallest stable height). Prefer `dvh` or `svh` over `vh` on mobile because `vh` is measured against the expanded viewport and causes the "100vh overscroll" bug on iOS Safari.

## When it applies

Set the viewport meta tag on every page that targets mobile. Use `dvh`/`svh` instead of `vh` for full-height layouts on mobile. Use `vw` and container queries for fluid typography and component sizing.

## Example

```html
<!-- Required for responsive CSS on mobile browsers. -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
  .hero {
    min-height: 100dvh; /* dynamic; updates with browser UI changes */
  }
</style>
```

## Related concepts

- [[frontend/css]] - responsive units and breakpoints in the CSS deep-dive.
- [[frontend/html]] - where the viewport meta tag lives.
- [[glossary/css-grid]] - Grid tracks often use `fr` and viewport units.
- [[glossary/css-flexbox]] - flex containers use viewport units for full-height layouts.
- [[frontend/tailwind]] - Tailwind's `h-dvh` and `screen` utilities map to viewport units.

## Citing this term

> See [[glossary/viewport|Viewport]] (llmbestpractices.com/glossary/viewport).

## Related

- [[frontend/css]]
- [[frontend/html]]
- [[frontend/tailwind]]
- [[glossary/css-grid]]
- [[glossary/css-flexbox]]