LLM Best Practices

Viewport

2 min read

View markdown source

Overview

This page is the atomic definition. Responsive design patterns live at 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

<!-- 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>
  • css - responsive units and breakpoints in the CSS deep-dive.
  • html - where the viewport meta tag lives.
  • css-grid - Grid tracks often use fr and viewport units.
  • css-flexbox - flex containers use viewport units for full-height layouts.
  • tailwind - Tailwind’s h-dvh and screen utilities map to viewport units.

Citing this term

See Viewport (llmbestpractices.com/glossary/viewport).

Graph View

Backlinks