Viewport meta tag
One line in the head decides whether phones show your page at a readable size or as a shrunken desktop layout. Switch the setting below and watch what happens.
Layout viewport: 980 CSS px
Screen: 390 CSS px
Scale applied: 40%
16px body text looks like: 6.4px
Mobile browsers assume a desktop-width layout viewport, commonly 980px, lay the page out at that width, then shrink it to fit the screen. 16px text ends up around 6px on screen.
<!-- no viewport tag -->The tag to copy
<meta name="viewport" content="width=device-width, initial-scale=1">Viewport values
| Value | What it does | Use it? |
|---|---|---|
| width=device-width | Layout viewport equals the screen width in CSS pixels | Yes |
| initial-scale=1 | Start at 100% zoom, no auto zoom on rotation in older iOS | Yes |
| width=600 | Fixed layout width, scaled to fit | Rarely; only for legacy fixed-width pages |
| minimum-scale | Limit zoom-out | Usually unnecessary |
| maximum-scale | Limit zoom-in | Avoid values below 2; blocks zoom |
| user-scalable=no | Disable pinch-zoom | No (accessibility failure) |
| viewport-fit=cover | Extend into notch and rounded-corner areas | With safe-area CSS |
| interactive-widget | How the on-screen keyboard resizes the viewport | For chat-style layouts |
The tag must be in the HTML head, not added later with JavaScript, because the browser decides the layout width before scripts run. Check any page for it with the meta tag checker.
Questions
What viewport meta tag should I use?
<meta name="viewport" content="width=device-width, initial-scale=1">. It makes the layout viewport match the device width and sets the initial zoom to 100%. That is the tag Google's documentation refers to for mobile-friendly pages, and it is what almost every responsive site needs.
Should I add maximum-scale=1 or user-scalable=no?
No. Blocking pinch-zoom makes text hard to read for people with low vision and fails WCAG success criterion 1.4.4 (Resize text). Some browsers ignore these values anyway for accessibility reasons.
Does the viewport tag affect SEO?
Google uses mobile-first indexing, meaning it primarily crawls and evaluates the mobile version of pages. A missing viewport tag makes a page render as a tiny desktop layout on phones, which harms usability.
What is viewport-fit=cover?
An extra value that lets your page draw into the areas around a notch or rounded corners on phones. Pair it with the env(safe-area-inset-*) CSS variables so content does not sit under the notch.