Ensure <meta name="viewport"> can scale a significant amount

The meta-viewport-large rule ensures that the <meta name="viewport"> tag does not block user zooming by including user-scalable="no" or setting maximum-scale to less than 5.

What is being tested?

This rule checks that:

• The <meta name="viewport"> tag does not contain user-scalable="no".
• If maximum-scale is present, its value is at least 5 (allowing up to 500% zoom).

Why it matters

Blocking zooming or limiting maximum zoom is problematic for users with low vision who rely on screen magnifiers or browser zoom to read content. The Web Content Accessibility Guidelines (WCAG) recommend supporting at least 200% zoom, but best practice is to allow up to 500% zoom.

The viewport only controls what part of the page is visible in the browser window; it does not affect keyboard or programmatic focus. Without the ability to zoom, users may not be able to enlarge text or controls enough to make them usable.

Correct example

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

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

Incorrect example

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

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

Best practices

• Remove user-scalable="no" from the viewport meta tag.
• If you set maximum-scale, use a value of at least 5.
• Test your page at zoom levels up to 500% to ensure it remains usable.
• Use responsive design and scalable units (like em or rem) to improve text and layout scaling.