# 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

```html

```

Put the tag in the ` ` 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](https://drafts.csswg.org/css-viewport/#viewport-meta), not in the HTML standard. The [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) lists the keys and their values.

## What happens without the tag

MDN's [viewport concepts page](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts) 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](https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html) (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](https://developers.google.com/search/docs/crawling-indexing/special-tags): "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](https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing)). Google recommends responsive web design for mobile sites.

## What the tag does not do

The viewport meta tag does not do these things:

1. It does not make a layout responsive. It sets the viewport size only. Your CSS must adapt the layout to that width.
2. It does not stop zoom on all devices. Some browsers ignore the zoom limits.
3. It does not control how search engines index the page. Use the [robots meta tag](/html-tags/meta-robots/) for that.

For the other tags in the page head, read the [meta tags cheat sheet](/html-tags/meta-tags-cheat-sheet/).

---

[View the canonical page](https://aichatwatch.com/html-tags/meta-viewport/) · [Browse llms.txt](https://aichatwatch.com/llms.txt)