Viewport meta tag must not disable user scaling.

The viewport meta tag controls how a page is displayed on mobile devices, including whether users can pinch-to-zoom. When this tag includes user-scalable=no or sets maximum-scale to a value less than 2, it prevents users from zooming in on content. This restriction blocks people with low vision from enlarging text and other elements to a readable size.

People with low vision often need to zoom content to 200% or more to read it comfortably. Disabling zoom forces these users to read text at whatever size the developer chose, which may be too small. On mobile devices, where screens are already constrained, this problem is especially acute. Preventing zoom can also affect users with cognitive disabilities who benefit from enlarging content to reduce visual clutter and improve focus.

This rule maps to WCAG 2.0 Success Criterion 1.4.4 (Resize Text) at Level AA, which requires that text can be resized up to 200% without assistive technology and without loss of content or functionality. Because text that cannot be resized to 200% also cannot fit within a 320-by-256 CSS pixel area, this issue is also relevant to Success Criterion 1.4.10 (Reflow).

How to fix it

Remove the zoom restriction from the viewport meta tag. There are two properties that can cause this problem:

• user-scalable=no — directly disables pinch-to-zoom. Remove this property entirely, or set it to yes.
• maximum-scale set to a value less than 2 — limits how far users can zoom in. Remove this property, or set it to at least 2.0.

If removing these restrictions causes layout problems at high zoom levels, the correct fix is to improve the responsive design of the page rather than preventing zoom. Use relative units like em, rem, or percentages for font sizes and container widths, and test layouts at 200% zoom.

Note that most modern mobile browsers ignore these viewport restrictions by default or provide an accessibility setting that overrides them. However, users on older mobile browsers may still be affected, and conforming to WCAG requires that the markup itself not impose these limits.

Examples

Zoom disabled with user-scalable=no

This viewport tag prevents zooming entirely:

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

Remove user-scalable=no or set it to yes:

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

Zoom limited with maximum-scale below 2

This viewport tag restricts zooming to 150%, which is below the 200% threshold required by WCAG:

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

Set maximum-scale to at least 2.0, or remove it:

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

Zoom locked to 100% with maximum-scale=1

A common pattern that completely prevents zooming:

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

Remove both restrictions:

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

Viewport tag that allows zooming

This tag sets user-scalable to yes explicitly, which is fine but also unnecessary since yes is the default:

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

Learn more:

W3C Reference

Understanding Success Criterion 1.4.4: Resize Text

→

W3C Reference

Understanding Success Criterion 1.4.10: Reflow

→

MDN Reference

MDN: Viewport meta tag

→