The viewport meta tag: what it does, and why zoom must stay on

Craig AddymanUpdated 5 min read

Short answer

Every page needs one line in its head: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, phones draw the page as a desktop site and shrink it to fit, so the text is too small to read. Don't add user-scalable=no or a maximum-scale below 2: both stop people zooming in, which accessibility checkers treat as a failure.

What the tag does

Phone browsers were built when most sites were designed for desktops. So by default they pretend the screen is about 980 pixels wide, lay the page out at that width, then zoom out until it fits. The viewport tag switches that off and tells the browser to use the phone's real width.

No viewport tag Laid out at desktop width and shrunk. Visitors pinch and scroll sideways to read anything.
width=device-width, initial-scale=1 Laid out at the phone's width, at normal size. Responsive CSS can now do its job.

This matters for search too. Google uses the mobile version of a page, crawled as a smartphone, for indexing and ranking. So the version of the page a phone sees is the one that has to compete. Google retired its Mobile-Friendly Test in December 2023, so you now have to check it yourself.

Why zoom must stay on

Two settings in the viewport tag stop people zooming in:

user-scalable=no Turns pinch-to-zoom off. user-scalable=0 does the same.
maximum-scale=1 Caps how far people can zoom. Anything below 2 stops text being enlarged to double size.

People with low vision rely on zooming. WCAG 1.4.4, the "Resize text" criterion at level AA, says text must be resizable to 200% without losing content or function. Accessibility checkers such as axe report both settings as a failure of it. Safari on iPhone has ignored user-scalable=no and maximum-scale since iOS 10 for this reason. Chrome on Android obeys them unless the visitor turns on "Force enable zoom", so most Android users are locked out.

The usual reasons for adding them have better fixes:

"The page zooms when I tap a form field" iPhones zoom in on inputs whose text is smaller than 16px. Set form fields to font-size: 16px or larger and the zoom stops, with no viewport change needed.
"Pinching breaks our map or carousel" Stop the gesture on that element only, with the CSS touch-action property (for example touch-action: pan-x pan-y), and leave the rest of the page zoomable.
"It was in the template" Common in older themes and app shells. Remove it: on almost every page, allowing zoom breaks nothing.

How to check by hand

1Read the tag with a snippet 30 seconds

Open DevTools (F12), go to the Console and paste:

// Reads the page's viewport tags and flags the common problems
const tags = [...document.querySelectorAll('meta[name="viewport" i]')]
  .map(m => (m.getAttribute('content') || '').toLowerCase().replace(/\s+/g, ''));
const blocksZoom = c => /user-scalable=(no|0)\b/.test(c)
  || Number((c.match(/maximum-scale=([\d.]+)/) || [])[1]) < 2;
console.table({
  'Viewport tags': tags.length ? tags.map(t => t || '(empty)').join(' | ') : '(none)',
  'Fits the screen': /width=device-width/.test(tags.at(-1) || '') ? 'yes' : 'NO: add width=device-width',
  'Zoom allowed': tags.some(blocksZoom) ? 'NO: remove user-scalable=no and maximum-scale' : 'yes',
  'Duplicates': tags.length > 1 ? 'YES: keep one' : 'no',
});

It lists every viewport tag and says whether the page fits the screen, whether zoom is allowed, and whether there are duplicates.

2Look at it as a phone would 2 minutes

  1. In DevTools, press Ctrl+Shift+M (⌘+Shift+M on a Mac) to open device mode.
  2. Pick a phone from the list at the top and reload the page.
  3. If the page looks like a tiny desktop site, the viewport tag is missing or wrong. If there's a sideways scrollbar, something is wider than the screen.

To test zoom, open the page on a real Android phone and pinch. If nothing happens, zoom is blocked.

3Check the source 1 minute

Press Ctrl+U and search for name="viewport". There should be exactly one match, near the top of the head. Two usually means a theme and a plugin both add one. The source shows the server HTML only, so a tag added by JavaScript won't appear here; the snippet above does see it.

How to fix it

  1. Use this tag in the head of every page, close to the top: 
    <meta name="viewport" content="width=device-width, initial-scale=1">
  2. Remove user-scalable=no, user-scalable=0 and any maximum-scale below 2. Removing maximum-scale altogether is simplest.
  3. Keep one tag. If there are two, find which template or plugin adds the extra one and remove it there.
  4. Fix the reason zoom was blocked using the alternatives above, so it doesn't creep back in.

How crawlers report this

If a crawl sent you here, these are the labels to look for. Our guide to Screaming Frog and Sitebulb issues covers other common ones.

Screaming FrogSitebulbWhat it means
Mobile: Viewport Not SetMissing viewport <meta> tag in the <head>Without it, phones show the page at desktop width.
No direct matchThe viewport <meta> tag prevents the user from scalingVisitors can't pinch to zoom.

Doing this on every page?

SEOSnip checks the viewport for you

Open the extension on any page and it reads every viewport tag. You get:

  • A flag when the tag is missing, so the page isn't set up for phones
  • A flag when there's more than one tag
  • The viewport tag, with user-scalable=no and maximum-scale highlighted
  • A ticket with that evidence, and a "Check if fixed" button that re-runs the check
Get started freeMore head and metadata guides
The page doesn't state its languagelanguage-missingThe page doesn't declare its text encodingcharset-missingSomething that doesn't belong has crept into the page's headhead-invalid-contentThe page has no titletitle-missing