Zoom blocked by the viewport tag

What it is

The page’s viewport tag, <meta name="viewport">, tells mobile browsers not to let visitors zoom in, or caps zooming below twice the normal size. It does this with user-scalable=no or a maximum-scale below 2 in the tag’s content. The setting is often copied from app-like templates to prevent accidental zooming, and it blocks deliberate zooming as well.

Why it matters

People with low vision pinch to zoom to read small text and see details. In browsers that obey the tag, they cannot enlarge the page, and may have to give up on it. WCAG 1.4.4 Resize Text  (Level AA) expects text to be resizable up to 200 percent without assistive technology, which is why Asky reports limits below 2. Since June 2025 the European Accessibility Act requires many businesses selling to consumers online in the EU to meet this criterion.

How Asky checks it

Asky reads the content of the first <meta name="viewport"> in the page’s raw HTML, matching the name in any letter case and ignoring letter case and spaces in the content. The page is reported when it contains user-scalable=no or user-scalable=0, or when maximum-scale is a number below 2. minimum-scale and initial-scale are not judged, and later viewport tags are not read. A page with no viewport tag, or an empty content, is not reported here: the mobile checks report a missing viewport tag, and a viewport without width=device-width, as separate issues.

Reported as a warning with medium severity.

How to fix it

1. Find the viewport tag in your site’s head template or site-wide custom code. If the page has more than one, keep a single tag; Asky reads only the first.
2. Remove user-scalable=no (or =0) and maximum-scale from its content.
3. Keep width=device-width, initial-scale=1, written exactly like that, in lower case and without spaces around the =. Deleting the whole tag instead raises the missing viewport tag issue, and dropping width=device-width raises the viewport width issue.
4. If zoom was blocked because phones zoom in when a visitor taps a form field, a common cause is form text smaller than 16 pixels. Raise the font size of the fields instead of blocking zoom.
5. Zoom a phone view of the page to 200 percent and check that text stays readable and nothing is cut off.

Example

The site-wide head code on https://example.com:

<!-- Before: zoom blocked -->
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
 
<!-- After: zoom allowed -->
<meta name="viewport" content="initial-scale=1, width=device-width">

← Back to Accessibility