What is a viewport?

Glossary · Updated October 23, 2026 · Also called: layout viewport, visual viewport

Definition The viewport is the rectangle of the browser window in which a web page is drawn, measured in CSS pixels rather than physical screen pixels. On phones it is about 360–440 CSS px wide in portrait (tablets about 690–1030 px), provided the page has a viewport meta tag; without one, mobile browsers lay the page out in a 980 px wide viewport and shrink it to fit.

How to fix it: The viewport meta tag: what it does and the one line you need

How does the viewport work?

Mobile browsers actually keep two viewports:

• The layout viewport is the box the page is laid out in. Percent widths, media queries and position: fixed are calculated against it. It only changes when the window or the viewport meta tag changes.
• The visual viewport is the part of the page you can see right now. It shrinks when you pinch-zoom in or when the on-screen keyboard opens, while the layout viewport stays the same.

When nothing is zoomed, the two are the same size. You can read both from JavaScript: document.documentElement.clientWidth gives the layout viewport width without a scrollbar, window.innerWidth includes it, and window.visualViewport.width and .height give the visible area.

Viewport width is not screen resolution

An iPhone 16 Pro has a screen 1206 physical pixels wide, but its viewport is 402 CSS pixels wide, because each CSS pixel is drawn with 3×3 device pixels (its device pixel ratio is 3). A Galaxy S22 has a 360 px viewport with a ratio of 3. This is why a layout designed for "1080 px wide phones" is a mistake: CSS only ever sees the smaller number. The mobile viewport sizes table lists the CSS width, height and pixel ratio of 54 phones and tablets.

Example

This one line in the <head> makes the layout viewport match the device's own width:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, Safari on iPhone and Chrome on Android assume the page was built for desktops, lay it out 980 CSS px wide and scale it down, so text becomes tiny. The viewport meta tag page explains each setting.

On iPhone vs Android

The height is where phones differ from desktops. Safari collapses its toolbar and Chrome slides its address bar away as you scroll, so the visible height changes while you read. CSS answers this with separate viewport units for the small, large and dynamic viewport. On both platforms the on-screen keyboard resizes only the visual viewport by default (Chrome since version 108).

How MobileCheck checks it

Each device in a check gets its real CSS viewport size, pixel ratio and the space taken by the browser's own bars. The report flags a page with no viewport meta tag (it renders the 980 px desktop layout and shrinks it) and a viewport that sets a fixed width instead of width=device-width. To see your own browser's numbers, open What is my viewport.

Related terms

• CSS pixelA CSS pixel (px) is the unit of length in CSS: 1/96 of an inch by definition, drawn with several device pixels on high-density screens.
• Device pixel ratio (DPR)Device pixel ratio (DPR) is how many physical screen pixels make up one CSS pixel in each direction: 2 or 3 on iPhones, about 2.6–4 on Android phones.
• Viewport meta tagThe viewport meta tag tells mobile browsers how wide to lay out a page. width=device-width, initial-scale=1 makes it fit the phone's own width.
• Viewport unitsViewport units size things relative to the viewport: 1vh is 1% of its height. svh, lvh and dvh pick the small, large or dynamic height on phones.

Guides and tools

• The viewport meta tag: what it does and the one line you need
• What is my viewport
• Mobile viewport sizes

Sources

1. MDN: Viewport concepts
2. MDN: VisualViewport API

All 27 glossary terms, A to Z