Your Page Zooms on an iPhone. On Android It Doesn't Zoom at All.

The Line Nobody Remembers Adding

Open the source of almost any store or marketing site built between 2012 and 2018 and there is a good chance the viewport tag reads width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no. It was copied from a starter template, a Stack Overflow answer or a theme, usually to stop one specific annoyance: an iPhone zooming in whenever someone taps a small form field.

It stayed because nobody who tests on an iPhone can see it. Safari on iOS has ignored user-scalable=no and maximum-scale since iOS 10 in 2016, so the page pinches normally on the phone the design team carries. Chrome and Samsung Internet on Android still obey it. On those phones, which are most of the phones in the world, the page cannot be enlarged at all.

For a reader with low vision that is the end of the page. Pinch-to-zoom is the first tool they reach for, before any screen magnifier or system setting, and it is the one this line switches off.

What WCAG Requires

axe-core, the rule engine behind Lighthouse and most automated accessibility tools, reports user-scalable=no and any maximum-scale below 2 as a critical issue under its meta-viewport rule. It is one of the few WCAG failures an automated test can prove outright from one line of markup, which is also why it shows up in demand letters: it is cheap for anyone to find.

The Three Ways a Page Switches Zoom Off

1. user-scalable=no. Also written user-scalable=0 or user-scalable=false. The browser ignores a pinch entirely.

2. maximum-scale below 2. maximum-scale=1 or maximum-scale=1.0 is exactly as complete a lock as user-scalable=no, it is only less obvious in a code review. A value of 2 or more passes 1.4.4. Below 5 it is still worth removing, because it replaces the phone's own, higher limit with yours.

3. CSS that eats the pinch. touch-action: none, or touch-action: pan-x pan-y without pinch-zoom, on html, body or a universal selector hands every two-finger gesture to the page's scripts. The viewport tag can be perfect and the page still will not zoom. This is usually a carousel, map or swipe library whose styles were scoped to the whole document. The value touch-action: manipulation is different: it keeps pinch-zoom and only removes the double-tap delay, and it is fine.

There is a fourth, rarer case: a script that rewrites the viewport tag after the page loads, often to set maximum-scale=1 while a form field has focus and restore it afterwards. Some of these restore it and some never do. A checker that reads the served HTML cannot tell which, so ours marks it for you to verify by hand.

The Fix Is Two Lines

The viewport tag should say this and nothing else:

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport-fit=cover is fine to add if the design runs under the notch. Leave out user-scalable, maximum-scale and minimum-scale.

Then fix the problem the zoom lock was hiding. Safari on iPhone zooms into any form field whose text is smaller than 16px. Give fields 16px text on small screens and the zoom never happens, for every user, with nothing switched off:

@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px;   /* iOS Safari will not auto-zoom a field at 16px or larger */
  }
}

If a component genuinely needs its own gestures, a map or an image viewer, put touch-action on that component, not on html or body, and keep pinch-zoom in the value wherever you can.

How to Test It in Thirty Seconds

1. Open the page on an Android phone in Chrome. An iPhone will not show you the problem.
2. Pinch outwards on a paragraph. The text should grow. If nothing happens, the page is locked.
3. Tap a form field. If the page jumps in and you remove the lock, fix the field's font size, not the viewport.
4. No Android phone: in desktop Chrome, open DevTools, switch on device emulation, and read the viewport tag in the Elements panel. Search the stylesheets for touch-action on html or body.

How to Check Your Own Page

The checker at the top of this article reads the viewport tag your page serves and up to eight of its stylesheets. It fails user-scalable=no, any maximum-scale below 2 and a page-wide touch-action that blocks a pinch, each under SC 1.4.4, and it names the file and the line. A cap between 2 and 5, a missing viewport and a script that rewrites the tag are marked for review, not counted.

The same read covers the other two things a phone user is promised: that the page works in either orientation (orientation lock guide) and that it fits a narrow screen without sideways scrolling (reflow guide). Whether text actually overlaps at 200% is a question about the rendered page. The whole-site scan renders every page in a real browser and names each WCAG 2.1 AA failure with its element, and the checker's result hands your domain straight to it.

Frequently Asked Questions