meta-viewport-large
Web validation
<meta name="viewport" /> element should not restrict scaling below 500%.Mobile browsers follow the page’s viewport settings when users pinch-zoom. If user-scalable is set to no or maximum-scale is below 5, people with low vision may not be able to zoom in the page to a point where the content is readable for them.
Note: The <meta name="viewport" /> tag is specifically designed for mobile browsers to control how websites are scaled and rendered on smaller screens. In most cases it is ignored by desktop browsers.
Pass Patterns
The <meta name="viewport" /> does not set scaling limits
The snippet below allows full browser and pinch-zoom because it sets no scaling limits.
<meta name="viewport" content="width=device-width, initial-scale=1">Very high maximum-scale value
The snippet below explicitly leaves zoom open and allows magnification up to 10×.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10">Fail Patterns
Scaling the screen by the user is disabled
user-scalable=no turns zoom off completely, blocking users from zooming the page.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Maximum scale is limited
Limiting maximum-scale to 2 permits only 200% zoom which may not be enough for some users.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">ACT Rules
Try It Yourself
Using a browser on a mobile device
- Open the page in a browser on a mobile device.
- Pinch-zoom the content beyond 200%.
Expected result: The text and content keep growing up to at least 500%.
Actual result: The zoom stops before it gets to 500%.
Inspecting the browser dev-tools
- Open the page in a modern browser, and open the browser DevTools on the Elements panel.
- Within the document’s
<head>element locate the<meta name="viewport" />tag.
Expected result: The content value has no maximum-scale, or sets it to 5 or a higher number.
Actual result: The content value sets maximum-scale to a number smaller than 5, or includes user-scalable=no.
FAQ
Why is this validation considered a best practice?
WCAG 2.2 requires increasing text size only to 200%, yet many users need larger text. Allowing 500% scaling matches mobile browser capabilities and avoids forcing people to rely on system magnifiers.
Why is this issue marked as Minor?
Most browsers still let users enlarge content when authors omit the meta tag. However, explicitly disabling zoom or capping it below 5 can block some assistive-technology users, so fixing it enhances, but rarely breaks accessibility.