User-scalable=no must not disable zoom

Last updated: March 2026

Who it helps:

Blind

Mobility

Standard:

WCAG 2.2 Level A

Related Guides

Meta viewport must not disable zoom via user-scalable=no

The meta viewport must not block text scaling or page zoom.

Using user-scalable=no or a restrictive maximum-scale prevents zoom on mobile browsers. This harms people with low vision and anyone reading on small screens. Allow browser zoom so users can resize content as needed.

Why It Matters

Many people rely on pinch-zoom or browser zoom to read. When zoom is disabled, text can be too small to read, controls become hard to use, and tasks fail.

Users with low vision or cataracts need magnification. Zoom also benefits users with motor challenges by enlarging touch targets and reducing precision demands.

On small screens, users zoom and pan to bring content into view. Blocking zoom removes a key method to access content comfortably.

Common Causes

<meta name="viewport"> includes user-scalable=no.
maximum-scale is set to 1 (or any value below 2).
JavaScript calls preventDefault on touchstart/touchmove, suppressing pinch-zoom.
Gesture libraries that intercept pinch events or double-tap to zoom.
Disabling zoom to mask layout issues at high magnification.

How to Fix

Remove user-scalable=no from the viewport meta tag.
Do not cap zoom tightly. If you use maximum-scale, set it to at least 2; recommendation: omit it or set 5.
Use a safe default viewport:
- width=device-width, initial-scale=1[, maximum-scale=5]
Do not block gestures in JavaScript:
- Avoid preventDefault on touchstart/touchmove unless essential.
- Use passive event listeners where possible.
Ensure the layout works when zoomed:
- WCAG expects text to be resizable up to 200% (SC 1.4.4).
- Recommendation: support reflow at 320 CSS px (~400% zoom) per SC 1.4.10.
- Use responsive layouts and relative units (em/rem) for text and spacing.
Verify the meta tag is present and correct on every route/page in SPAs and templated sites.

How to Test

Code scan:
Check the head for user-scalable=no. Remove if present.
Check for maximum-scale. If present and < 2, increase or remove it.
Desktop zoom check:
Windows/Linux: Ctrl + +, Ctrl + -, Ctrl + 0. macOS: Cmd + +, Cmd + -, Cmd + 0.
Confirm zoom reaches at least 200% and content remains usable.
Mobile/touch check:
On iOS Safari and Android Chrome, pinch to zoom and double-tap to zoom.
Confirm you can zoom in and out freely beyond 200% without being blocked.
Screen reader check:
With VoiceOver/TalkBack enabled and the page zoomed, confirm focus is visible and interactive elements remain operable.
Keyboard check:
At 200%+ zoom, tab through content. Ensure focus is not clipped and controls remain reachable.

Good Example

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  <title>Example</title>
</head>
<body>
  <button class="cta">Continue</button>
  <script>
    // Do not block pinch-zoom; use passive listeners when observing touch
    document.addEventListener('touchmove', function (e) {
      // No preventDefault here; zoom remains enabled
    }, { passive: true });
  </script>
</body>

Bad Example

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
  <title>Blocked Zoom</title>
</head>
<body>
  <a href="#" class="small-link">Read more</a>
  <script>
    // This suppresses pinch-zoom and scrolling gestures
    document.addEventListener('touchmove', function (e) {
      e.preventDefault();
    }, { passive: false });
  </script>
</body>

Quick Checklist

No user-scalable=no anywhere in the viewport meta tag.
No maximum-scale values below 2; recommendation: omit or set 5.
Pinch-zoom and double-tap zoom work on iOS and Android.
Browser zoom reaches at least 200% without loss of functionality.
No JS prevents default touch gestures unnecessarily; use passive listeners.
Responsive layout and relative units support high zoom and reflow.
Focus remains visible and operable when zoomed.
The correct viewport meta is applied on every page or route.