user-scalable=no: why you should not disable zoom on mobile

Updated October 17, 2026 · Covers: Zooming is disabled

What it means

Your viewport meta tag tells the browser not to let visitors zoom. It usually looks like one of these:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

user-scalable=no turns pinch-zoom off entirely. maximum-scale=1 sets the maximum zoom to 100%, which has the same effect. MobileCheck flags either one, and any maximum-scale below 2.

Why it matters

Pinch-zoom is one of the most basic accessibility features of a phone. People with low vision rely on it, but so does everyone else at times: to read small print in a product photo, check a detail in a chart, or read a page in bright sunlight. Blocking zoom takes that away for your whole site.

WCAG 2.2 success criterion 1.4.4 (Resize Text) requires that text can be enlarged to 200% without losing content or function. Disabling zoom on a site whose text is small makes that very hard to meet, and accessibility checkers commonly report user-scalable=no and low maximum-scale values as failures.

What browsers actually do

The two main mobile engines treat these settings differently, which is why the problem is easy to miss:

• Safari on iPhone and iPad (since iOS 10) ignores user-scalable=no and low maximum-scale values for pinch-zoom: people can still zoom in. If you only test on an iPhone, the tag appears harmless.
• Chrome on Android respects the setting. Pinch-zoom simply doesn't work, unless the user has turned on "Force enable zoom" in Chrome's accessibility settings, which most people don't know exists.

So the tag mainly hurts Android visitors, and it's invisible to anyone checking only on an iPhone.

Other browsers vary. Some Android browsers offer their own override setting, and in-app browsers inside social and messaging apps behave like the engine they are built on. You can't count on any of them to restore zoom, so the only dependable approach is not to block it in the first place.

How MobileCheck finds it

MobileCheck reads the viewport meta tag on every device it tests. If the tag contains user-scalable=no (or user-scalable=0), or a maximum-scale value below 2, the report shows a "Zooming is disabled" warning with the exact tag it found. It's a warning rather than a critical problem, but it lowers the score and is quick to fix.

If your viewport tag also lacks width=device-width, you'll see that problem reported separately.

How to fix it

Remove user-scalable and maximum-scale from the tag. This is all you need:

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

Browsers then use their default zoom limits, which allow plenty of magnification. If you have a specific reason to set maximum-scale, use a value of at least 2; 5 is a common choice.

Check where the tag comes from before editing. In WordPress it is usually printed by the theme's header template, and some themes, page builders and plugins add their own copy. Frameworks and site builders often set it in a layout file or a project setting. View the page source after deploying to make sure only one viewport tag remains and that the old one isn't still being injected.

Most sites disable zoom to solve a specific problem. Each has a better fix that doesn't take zoom away.

"iPhone zooms in when I tap a form field"

This is the most common reason. Safari on iOS zooms into an input, select or textarea when it gets focus if its font size is under 16px. Adding maximum-scale=1 is a popular workaround because on iOS it stops this zoom while Safari still allows pinch-zoom. But the same tag disables zoom completely in Chrome on Android, so you fix an annoyance on one platform by creating an accessibility barrier on the other.

The reliable fix is a 16px font size on form fields:

input, select, textarea { font-size: max(16px, 1rem); }

If the design calls for smaller-looking fields, reduce padding or height rather than font size. The text size guide has more on choosing sizes.

"Double-tap zoom makes buttons feel slow"

Older mobile browsers waited about 300ms after a tap to see whether a second tap (double-tap to zoom) followed. Modern mobile browsers skip that delay on pages with width=device-width, so disabling zoom no longer buys any speed. If double-tap zoom still gets in the way on a specific control, such as a stepper or game button, turn it off for that element only:

.stepper button { touch-action: manipulation; }

touch-action: manipulation keeps panning and pinch-zoom but disables double-tap zoom on that element.

"My map, canvas or game needs its own gestures"

Interactive maps, drawing apps and games often handle pinch gestures themselves. Tell the browser to leave gestures inside that element to your code, instead of disabling zoom for the whole page:

.map, canvas.game { touch-action: none; }

The rest of the page stays zoomable, and the map receives the pinch events. Provide on-screen zoom buttons for people who can't pinch.

"The layout breaks when people zoom"

Zoom exposes layout problems; it doesn't cause them. If zooming in reveals content sticking out sideways or overlapping, fix that directly. The guide to content wider than the screen and the large text guide cover the usual causes.

How to check the fix

View your page source and confirm the viewport tag no longer contains user-scalable=no or a low maximum-scale. Then run the free check again; the "Zooming is disabled" warning should be gone.

Test pinch-zoom on an Android device, because that's where the tag had an effect. If you've switched form fields to 16px, check the iPhone side on a real iPhone: tap into a field and confirm the page doesn't jump. Emulators, including Chrome's device mode, don't reproduce Safari's focus zoom.

Related guides