viewport-zoom
Do not disable pinch zoom
Pinch-to-zoom is an essential accessibility feature for low-vision users who cannot read text at the page's default size. When zoom is disabled, these users cannot enlarge text or images, making the page completely inaccessible without external magnification software. Low-vision users who rely on browser zoom are entirely blocked. Additionally, all users benefit from being able to zoom in on small text, fine-print, or complex images. Disabling zoom is one of the most harmful and easily preventable accessibility failures.
Quick Reference
- Never use
user-scalable=nooruser-scalable=0in the viewport meta tag - Never set
maximum-scale=1(or any value below 5) in the viewport meta tag - Both prevent pinch-to-zoom, violating WCAG 2.1 SC 1.4.4 (Resize Text, Level AA)
- The correct viewport meta tag is:
<meta name='viewport' content='width=device-width, initial-scale=1'> - Note: iOS 10+ ignores
user-scalable=noin Safari, but other browsers and older iOS do not
Check
Find the <meta name='viewport'> element in the HTML <head>. Check its content attribute for: (1) user-scalable=no — disables all zoom; (2) user-scalable=0 — same effect; (3) maximum-scale=1 or maximum-scale=1.0 — limits zoom to the initial scale; (4) any maximum-scale value below 2 — significantly limits zoom range. Flag any of these. Also check CSS for touch-action: none or user-zoom: fixed (CSS Device Adaptation, rarely used) that may limit zoom.
Fix
Remove user-scalable=no and maximum-scale=1 from the viewport meta tag. The correct viewport meta tag for a responsive site is: <meta name='viewport' content='width=device-width, initial-scale=1'>. If maximum-scale was set for a specific reason (e.g., to prevent unintended zoom on input focus on iOS), the correct fix is to set form input font-size: 1rem (16px) instead — iOS Safari only auto-zooms on input focus when font-size is below 16px.