How to fix: Viewport disables user scaling

The viewport meta tag tells mobile browsers how to size and scale the page. A typical, correct value is content="width=device-width, initial-scale=1". The problem arises when developers add tokens that lock the page at one zoom level: user-scalable=no (or user-scalable=0) outright disables pinch-zoom, and maximum-scale=1 caps how far a user can enlarge the page, which on many browsers has the same practical effect.

WCAG Success Criterion 1.4.4 Resize Text requires that text can be resized up to 200% without loss of content or functionality. Pinch-to-zoom on a phone is the most direct way many people meet that need, so a viewport that forbids zooming directly defeats the criterion. Designers sometimes add these tokens hoping to make a layout feel more app-like or to stop accidental zooming, but the result is that anyone who needs larger text simply cannot get it.

The fix is to delete the offending tokens and keep only what you need to set the initial layout. Removing user-scalable=no and maximum-scale=1 restores the user's ability to pinch and zoom, and a clean content="width=device-width, initial-scale=1" still gives you a responsive starting point on mobile without taking control away from the reader.

Low-vision users are hit hardest. Many do not use a screen reader at all; they read visually and rely on zooming the page, especially on a small phone screen, to make text large enough to read. When the viewport blocks zoom, the page is stuck at a size they cannot comfortably read, with no workaround inside the browser.

It also affects people with temporary or situational limitations, like reading on a phone in bright sunlight or without their glasses, and older users whose near vision has declined. Pinch-to-zoom is such a universal, expected gesture that disabling it surprises and frustrates a wide range of people, not just those with a diagnosed disability.

Blocking zoom is a Level AA failure under SC 1.4.4 Resize Text, and Level AA is the standard courts and the U.S. Department of Justice point to when applying the ADA to websites. Because it is set in a single, easily inspected meta tag, it is simple for an automated scanner or a plaintiff to detect and document, which makes it an easy item to cite in an audit or demand letter.

Accessibility lawsuits continue to rise, and the majority target businesses under $25 million in revenue. This particular fix costs almost nothing: you are deleting a few tokens from one line of HTML, and the modern reasons people once disabled zoom (avoiding layout glitches) are largely obsolete with responsive design. Removing the restriction restores access for low-vision users with no real downside.

1. Find the <meta name="viewport"> tag in your document head and read its content attribute.
2. Remove user-scalable=no and user-scalable=0 so pinch-to-zoom is allowed.
3. Remove maximum-scale=1 (and any low maximum-scale cap) so users can enlarge text to at least 200%.
4. Keep a clean responsive value such as content="width=device-width, initial-scale=1".
5. Test on a real phone by pinching to zoom in, then re-scan to confirm the viewport no longer disables scaling.

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

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

AccessKnight finds the <meta name="viewport"> element and reads its content attribute. It flags the tag when that content includes user-scalable=no or user-scalable=0, or when it caps zoom with maximum-scale=1. The maximum-scale check is written to match a value of exactly 1 (it will not false-positive on values like maximum-scale=10), and the fix is to remove those zoom-blocking tokens while keeping a responsive value such as width=device-width, initial-scale=1.