ADA Compliance Professionals

    Viewport must allow zoom (user-scalable)

    Last updated:

    Who it helps:
    Blind
    Mobility
    Standard:
    WCAG 2.2 Level A

    Related Guides

    Pages must not use user-scalable=no or low maximum-scale

    The viewport meta tag must not block zoom; users need to enlarge content when needed.

    This issue appears on mobile sites that set user-scalable=no or restrict maximum-scale in the meta viewport. It harms people with low vision and anyone reading on small screens.

    Why It Matters

    Zoom is essential for people with low vision and aging eyes to read comfortably. Blocking zoom forces strain, errors, and abandonment.

    WCAG 2.2 requires that text can be increased up to 200% without loss of content or functionality (SC 1.4.4) and that content reflows on small viewports (SC 1.4.10). Disabling zoom undermines these goals on touch devices.

    Zoom also helps users with cognitive fatigue and motor limitations by increasing target size and reducing precision demands.

    Common Causes

    • meta name="viewport" includes user-scalable=no.
    • maximum-scale is set to 1 (or any value < 5), limiting how far users can zoom.
    • minimum-scale and maximum-scale both set to 1, effectively locking the scale.
    • JavaScript cancels browser pinch gestures (for example, preventing default on gesturestart on iOS Safari).
    • Global CSS or scripts meant to stop double-tap zoom also interfere with pinch-zoom.

    How to Fix

    1. Find the meta viewport tag in the <head>.
    2. Remove user-scalable=no from the content value.
    3. Remove maximum-scale entirely, or set it to a permissive value. Recommendation: if used, maximum-scale >= 5.
    4. Remove scripts that preventDefault() on pinch/gesture events (e.g., gesturestart/gesturechange on iOS Safari).
    5. Keep the viewport simple: width=device-width, initial-scale=1 is sufficient for most sites.
    6. Verify at 200% zoom that content remains readable and usable (WCAG 2.2 SC 1.4.4). Ensure text reflows without two-dimensional scrolling for typical content at 320 CSS px width (SC 1.4.10).

    How to Test

    • Code review:
    • Search for user-scalable in meta viewport.
    • Check for maximum-scale values less than 5.
    • Look for scripts handling gesturestart/gesturechange that call preventDefault().
    • Mobile/touch check (iOS Safari, Android Chrome):
    • Pinch-zoom in and out. Confirm zoom is allowed and can increase well beyond 200%.
    • At high zoom, verify text is readable, forms are operable, and no fixed overlays block interaction.
    • Desktop check:
    • Zoom the page to 200% (Ctrl/Cmd + +). Confirm no critical content or controls are cut off and horizontal scrolling is not required for text.
    • Assistive tech compatibility (optional):
    • Increase OS text size and ensure content remains usable. Zoom should still be possible when supported by the browser/OS.

    Good Example

    A permissive viewport that allows users to zoom freely.

    HTML
    !doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Accessible Zoom</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .container { max-width: 65ch; margin: 1rem auto; padding: 1rem; }
    img { max-width: 100%; height: auto; }
    button { font: inherit; padding: 0.6rem 1rem; }
  </style>
</head>
<body>
  <main class="container">
    <h1>Article</h1>
    <p>Users can pinch-zoom as needed; content reflows within the container.</p>
    <button>Read more</button>
  </main>
</body>
</html>

    Bad Example

    Zoom is disabled by meta settings and script.

    HTML
    <head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
  <script>
    // Prevents pinch-zoom on some mobile browsers
    document.addEventListener('gesturestart', function (e) { e.preventDefault(); });
  </script>
</head>

    Quick Checklist

    • No user-scalable=no anywhere in the meta viewport.
    • No restrictive maximum-scale; omit it or set >= 5 (recommended).
    • No scripts cancel pinch/gesture events that block zoom.
    • Viewport is simple: width=device-width, initial-scale=1.
    • At 200% zoom, all content and controls remain usable.
    • Content reflows on small screens without unnecessary horizontal scrolling.
    • Works on iOS and Android with pinch-zoom enabled.