Meta Viewport Tag: Syntax, Values and Zoom Settings
Viewport meta tag syntax, every content value, what Google says about it, and why you must not turn off zoom with user-scalable=no.
The viewport meta tag tells a mobile browser how wide to lay out a page and how far to zoom in at first. The viewport is the area of the screen that shows the page. Most responsive sites use width=device-width, initial-scale=1. Do not use the tag to turn off zoom.
Syntax
<meta name="viewport" content="width=device-width, initial-scale=1">Put the tag in the <head> element. The content value is a list of key=value pairs, separated by commas. The tag is defined in the CSS Viewport Module Level 1, not in the HTML standard. The MDN reference lists the keys and their values.
What happens without the tag
MDN’s viewport concepts page explains it. If the tag is missing, some mobile browsers lay out the page at a fixed width, usually 980 pixels. Then they shrink the result to fit the screen. On a 320 pixel wide phone, the text can become too small to read. With width=device-width, the browser uses the width of the device instead.
Keys and values
| Key | Values | What it sets |
|---|---|---|
width |
1 to 10000, or device-width |
Minimum width of the viewport in CSS pixels |
height |
1 to 10000, or device-height |
Minimum height of the viewport |
initial-scale |
0.0 to 10.0 |
First zoom level, as a ratio of device width to viewport size |
minimum-scale |
0.0 to 10.0 |
Smallest zoom level |
maximum-scale |
0.0 to 10.0 |
Largest zoom level |
user-scalable |
yes (default) or no |
Whether the user can zoom |
interactive-widget |
resizes-visual (default), resizes-content, overlays-content |
How widgets such as a virtual keyboard resize the viewport |
viewport-fit |
auto, contain, cover |
Whether the viewport fits inside the display or fills it |
MDN says that if you omit initial-scale, the browser chooses the first zoom level. If content is wider than the screen, the browser can zoom out. Add initial-scale=1 to start at 100 percent.
If you use viewport-fit=cover, MDN recommends the CSS env() safe area inset variables.
Do not turn off zoom
Do not set user-scalable=no or a low maximum-scale. MDN warns that user-scalable=no stops people with low vision from reading the page. The accessibility rule WCAG success criterion 1.4.4 (Level AA) requires text that can be resized up to 200 percent.
MDN also says that browser settings can ignore user-scalable, minimum-scale and maximum-scale, and that iOS 10 and later ignore them by default. A page that turns off zoom can still be zoomed on these devices.
How Google treats the tag
Google lists the tag on its meta tags page: “This tag tells the browser how to render a page on a mobile device. Presence of this tag indicates to Google that the page is mobile friendly.”
Google uses mobile-first indexing. Google says that it uses the mobile version of a site, crawled with the smartphone agent, for indexing and ranking (Google Search Central). Google recommends responsive web design for mobile sites.
What the tag does not do
The viewport meta tag does not do these things:
- It does not make a layout responsive. It sets the viewport size only. Your CSS must adapt the layout to that width.
- It does not stop zoom on all devices. Some browsers ignore the zoom limits.
- It does not control how search engines index the page. Use the robots meta tag for that.
For the other tags in the page head, read the meta tags cheat sheet.