The viewport represents the visible polygonal viewing area in web browsers, governing CSS layout dimensions, media query breakpoints, and responsive rendering.
In web development and browser engine architecture, the viewport is the polygonal viewing region (typically rectangular) in which browser documents and user interfaces are rendered. Standardized by the World Wide Web Consortium (W3C) and WHATWG, the viewport is the foundational reference frame for CSS percentage widths, viewport units (vw, vh, dvh, svh, lvh), and responsive @media query breakpoints.
Test and debug web applications across standard mobile, tablet, and desktop viewports in real time using our client-side Responsive Design Tester or generate production-ready meta tags with our Meta Tag Generator.
| Specification | Details |
|---|---|
| Standard Bodies | W3C CSS Working Group & WHATWG HTML Standard |
| Relevant Specifications | CSS Values and Units Module Level 4, CSSOM View Module |
| Core HTML Tag | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| CSS Viewport Units | vw, vh, vmin, vmax, vi, vb, svw/svh, lvw/lvh, dvw/dvh |
| Container Units | cqw, cqh, cqi, cqb, cqmin, cqmax |
| JavaScript APIs | window.innerWidth, window.innerHeight, window.visualViewport |
On desktop browsers, the window display area, the CSS layout calculation frame, and the visible canvas are effectively identical. On mobile touchscreens, however, the browser architecture separates the concept into two distinct viewports:
┌────────────────────────────────────────────────────────────┐
│ Layout Viewport │
│ (CSS Reference Frame: window.innerWidth / innerHeight) │
│ │
│ ┌───────────────────────────────┐ │
│ │ Visual Viewport │ │
│ │ (Physical Visible Screen Area)│ │
│ │ │ │
│ │ Pinch-to-zoom / Soft Keyboard│ │
│ └───────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────┘
width: 100%), absolute element positioning, and @media query boundaries. Without a viewport meta tag, mobile browsers default to an artificial layout viewport of 980px.To prevent mobile browsers from rendering desktop-width layouts and zooming out, modern responsive web applications include the viewport <meta> directive in the document <head>:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
</head>
width=device-width: Overrides the default 980px desktop fallback, binding the layout viewport width to the device's screen width in CSS reference pixels.initial-scale=1.0: Sets the initial zoom ratio to 1:1 between CSS pixels and device-independent pixels.viewport-fit=cover: Instructs the browser to expand the layout viewport to fill the entire physical screen, enabling CSS safe area insets (env(safe-area-inset-*)) around hardware notches, camera cutouts, and rounded display corners.user-scalable=no (Discouraged): Disables user pinch-zooming. Violates accessibility guidelines (WCAG 1.4.4) and should generally be avoided.Mobile browser interfaces dynamically expand and collapse address bars and navigation toolbars as users scroll. CSS Values and Units Level 4 introduced specialized viewport units to solve layout jump defects:
/* Legacy unit: prone to clipping under mobile toolbars */
.hero-banner-legacy {
height: 100vh;
}
/* Small Viewport Height (svh): Height when browser chrome is fully expanded */
.hero-banner-safe {
height: 100svh;
}
/* Large Viewport Height (lvh): Height when browser chrome is retracted */
.hero-banner-max {
height: 100lvh;
}
/* Dynamic Viewport Height (dvh): Dynamically adapts to toolbar collapse */
.hero-banner-dynamic {
height: 100dvh;
}
The Device Pixel Ratio (DPR) defines the relationship between physical device pixels and logical CSS pixels:
$$\text{DPR} = \frac{\text{Physical Hardware Pixels}}{\text{CSS Reference Pixels}}$$
For example:
1.0 (1 CSS px = 1 physical px).2.0 or 3.0 (1 CSS px = 4 or 9 physical subpixels).High-DPR displays ensure smooth typography and vector SVG rendering, but require responsive image markup (<img srcset="..."> or <picture>) to deliver high-density bitmap assets without pixelation.
Free, browser-based utilities to test, generate, and inspect Viewport (Layout vs Visual Viewport & Responsive Design) payloads directly.
Preview web pages across multiple device viewports instantly.
Generate SEO meta tags, Open Graph, Twitter Cards, and JSON-LD structured data.
Format, minify, and validate CSS with property sorting and SCSS conversion.
Validate manifest.json, inspect service worker config, and flag installability issues.