The viewport meta tag is an HTML element in the page head, written as meta name="viewport" with a content attribute, that tells mobile browsers how wide the layout viewport should be and how the page should be scaled when it first loads. In the mobile web, it is the switch that turns off desktop emulation: without it, phones render pages as if on a screen about 980 CSS pixels wide and then shrink them to fit.
The standard declaration is width=device-width, initial-scale=1. It makes the layout width equal to the device width in CSS pixels, so media queries and responsive layouts respond to the real screen size instead of a virtual desktop.
How the viewport meta tag changes rendering
The viewport meta tag changes rendering by setting the size of the layout viewport, the area the browser uses to calculate CSS layout, percentages and media queries. Early smartphone browsers adopted a wide default layout viewport so that desktop-only sites would not break, letting users pinch to zoom into them.
Mobile browsers distinguish two viewports. The layout viewport is the box the page is laid out in, while the visual viewport is the part currently visible on screen, which shrinks when the user zooms or when the on-screen keyboard appears. The meta tag controls the layout viewport and the initial zoom level of the visual viewport.
| Aspect | Without the tag | With width=device-width, initial-scale=1 |
|---|---|---|
| Layout width | Default of about 980 CSS pixels | Device width, often 360 to 430 CSS pixels on phones |
| Media queries | Match desktop breakpoints | Match the real phone width |
| Initial appearance | Zoomed-out page, tiny text | Readable text at normal size |
| Text inflation | Browser may enlarge text heuristically | Usually not applied |
| Tap behavior | Possible delay for double-tap zoom detection | Immediate taps in modern browsers |
CSS pixels are not device pixels. A phone with a device pixel ratio of 3 that is 390 CSS pixels wide has 1,170 physical pixels across. The browser handles that mapping; device-width refers to the width in CSS pixels, which is what designers should work with.
Viewport meta tag properties
The content attribute accepts a comma-separated list of key-value properties. Only width and initial-scale are needed for most sites; the others should be used deliberately.
| Property | Typical value | Effect |
|---|---|---|
| width | device-width | Sets the layout viewport width |
| initial-scale | 1 | Sets the zoom level on first load |
| minimum-scale and maximum-scale | Usually omitted | Limit how far users can zoom |
| user-scalable | Usually omitted | Can disable pinch to zoom, harms accessibility |
| viewport-fit | cover | Extends content under notches and rounded corners |
| interactive-widget | resizes-content | Controls how the on-screen keyboard resizes the page |
With viewport-fit=cover, content extends into the areas around a display cutout, and the page must use the CSS env() function with safe area inset values to keep text and buttons clear of notches and the home indicator. The interactive-widget property, supported in Chromium-based browsers, decides whether the on-screen keyboard shrinks the layout viewport or only the visual viewport.
Zoom restrictions and accessibility
Setting user-scalable=no or maximum-scale=1 prevents users from zooming, which creates a serious accessibility barrier for people with low vision. Accessibility guidelines such as WCAG require that text can be resized to 200 percent without loss of content or function, and blocking pinch to zoom works against that requirement.
Browsers have responded by ignoring zoom restrictions in many cases: Safari on iOS has allowed users to zoom regardless of these settings for years, and several Android browsers offer a setting to force zoom. The restriction therefore rarely achieves its aim and mainly causes audit failures and frustration on browsers that respect it.
A common reason developers add zoom restrictions is to stop iOS Safari from zooming into form fields. That zoom happens when an input’s font size is below 16 CSS pixels; the correct fix is to set form controls to at least 16 px, not to disable zoom for everyone.
The viewport meta tag and related mobile web techniques
The viewport meta tag is the foundation of responsive design on phones, but it only sets the stage. Layout decisions are made by CSS, and several newer features address viewport behavior that the tag cannot control.
| Technique | What it does | Relation to the viewport meta tag |
|---|---|---|
| Media queries | Apply styles by viewport width and features | Only reflect real widths when the tag is set |
| Mobile-first design | Starts styles at small widths and adds complexity | Assumes device-width layout |
| Dynamic viewport units | svh, lvh and dvh account for browser toolbars | Solve height issues the tag cannot |
| Web app manifest | Controls display mode of installed web apps | Separate file, works alongside the tag |
| Visual Viewport API | Reports the visible area and keyboard changes | Lets scripts react to zoom and keyboards |
A CSS rule for viewport settings was once proposed as a replacement for the meta tag but was abandoned. The meta tag remains the standard mechanism and is included in essentially every modern page template.
Common mistakes
The most common mistake is omitting the tag entirely, which makes a responsive stylesheet appear broken on phones because the browser lays out the page at desktop width. Search engines that evaluate mobile usability flag such pages as not mobile-friendly.
- Fixed widths such as width=600 break on devices of other sizes; use device-width.
- Disabling zoom harms accessibility and is often ignored anyway.
- Multiple viewport tags produce browser-dependent results; declare one in the head.
- Fixed-width elements wider than the screen still cause horizontal scrolling despite a correct tag.
- Relying on 100vh for full-height layouts leads to content hidden behind browser toolbars.
Put simply
The viewport meta tag is a short line of code at the top of a web page. It tells a phone’s browser to fit the page to the phone’s real screen. Without it, the browser pretends the screen is as wide as a computer. It then shrinks the page, and the text becomes tiny.
It is like telling a tailor your real measurements. With the right size, the page fits and can rearrange itself neatly for a small screen.
In practice
A city library launches a redesigned website with a responsive stylesheet that stacks columns below 600 pixels. On phones, however, visitors see a miniature desktop layout with three columns and unreadable text, and the mobile usability report lists every page as having content wider than the screen.
A developer finds that the page template lacks the viewport declaration. Adding width=device-width, initial-scale=1 to the head makes the single-column mobile layout appear immediately. The developer also removes a maximum-scale=1 setting copied from an old template and raises form field text to 16 px, so the search box no longer triggers automatic zoom and visitors can still pinch to zoom into book covers and opening hours.