Locked viewport zoom: when user-scalable=no breaks accessibility
Setting user-scalable=no or maximum-scale=1 in your viewport meta blocks users from zooming. It's a WCAG 1.4.4 failure and modern browsers ignore it anyway. Remove the lock.
Setting user-scalable=no or maximum-scale=1 in your viewport meta blocks users from zooming. It's a WCAG 1.4.4 failure and modern browsers ignore it anyway. Remove the lock. The viewport meta tag accepts attributes like user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 that prevent users from zooming. Designers sometimes lock zoom for aesthetic consistency, but the cost is real users who can't read your content.
Last updated·
What it is
The viewport meta tag accepts attributes like user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 that prevent users from zooming. Designers sometimes lock zoom for aesthetic consistency, but the cost is real users who can't read your content.
Why it matters
WCAG 1.4.4 (Resize Text) requires that users can zoom to at least 200% without loss of content or function. Users with low vision rely on zoom. Modern browsers (Safari, Chrome) ignore the lock to protect users.
How to fix it
- Remove user-scalable, minimum-scale, maximum-scale. The correct viewport tag is <meta name="viewport" content="width=device-width, initial-scale=1">. Nothing else.
- Test responsive layout under 200% zoom. If your layout breaks under user zoom, fix the layout with responsive CSS — not by blocking zoom.
- Audit with Lighthouse Accessibility. The "Viewport" check will flag a locked viewport.
Authoritative sources
- Google Search Central documentation — Google
- Schema.org vocabulary — schema.org
- SEO Starter Guide — Google Search Central
- MDN — HTML meta and link elements — Mozilla MDN