The meta-viewport rule flags a viewport meta tag that stops people from zooming the page on a phone or tablet – with user-scalable=no or a maximum-scale below 2. People with low vision then cannot enlarge text. The fix is one line: <meta name="viewport" content="width=device-width, initial-scale=1">, with no zoom restrictions.
What the rule means
WCAG 1.4.4 Resize Text requires that text can be enlarged to 200% without assistive technology and without losing content or functions. On mobile devices, pinch-to-zoom is the built-in way to do that, and the viewport meta tag can switch it off.
axe-core reads the content of <meta name="viewport"> in the top-level document and fails when it contains:
user-scalable=no, or a numericuser-scalablebetween -1 and 1, such asuser-scalable=0;maximum-scalebelow 2, for examplemaximum-scale=1ormaximum-scale=1.5. axe treatsmaximum-scale=yesas 1.
It passes when there is no restriction – and also when there is no viewport tag at all, because then nothing blocks zoom. A maximum-scale of exactly 2 passes the rule, but leaves people who need more than 200% stuck; it is better to leave the property out.
What the rule does not check: whether the text really stays readable and complete at 200%, which is the actual requirement of 1.4.4. That needs a person.
Who is affected
People with low vision who read on a phone by zooming in, older people whose near vision has declined, and anyone reading small print in poor light. Safari on iOS has ignored user-scalable=no since iOS 10, but other mobile browsers still honour it unless the person knows where to find a setting that overrides it. For them, a page with blocked zoom stays at the size the designer chose.
Why the check fails
- Old mobile templates and frameworks that shipped
maximum-scale=1, user-scalable=noas the default, to make pages feel "app-like". - Stopping iOS from zooming into form fields. Safari zooms in when an input's text is smaller than 16px; blocking zoom for the whole page is a common but wrong workaround.
- Maps, carousels and games whose own pinch or swipe gestures clash with page zoom.
- Hybrid apps and web views whose HTML was copied to the public website unchanged.
- Snippets copied from old tutorials into a theme's
<head>.
How to fix it
- Find the viewport tag in the base template, theme or framework config.
- Remove
user-scalable=noand anymaximum-scale. Keepwidth=device-width, initial-scale=1. - If you blocked zoom because of iOS form-field zooming, give inputs a font size of at least 16px instead.
- If a map or canvas needs its own gestures, handle them on that element (for example with CSS
touch-action) rather than disabling zoom for the whole page.
<!-- Before: zoom switched off twice over -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Timetable – Example Ferries</title>
</head>
<body>
<main><h1>Timetable</h1></main>
</body>
</html><!-- After: responsive layout, zoom left to the person -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timetable – Example Ferries</title>
</head>
<body>
<main><h1>Timetable</h1></main>
</body>
</html>The form-field zoom on iOS is solved with a font size, not with the viewport tag:
/* 16px or more: Safari on iOS no longer zooms in on focus */
input, select, textarea { font-size: 1rem; }How to test it manually
- Open the page source and read the
contentof<meta name="viewport">. - On a phone, open the page and pinch to zoom. Try it in more than one browser, since iOS Safari ignores the restriction and may hide the problem.
- For 1.4.4 itself: on a desktop browser, zoom to 200% (Ctrl/Cmd and +) and check that no text is cut off, overlapping or hidden, and that every function still works.
- Also check text-only zoom if your browser offers it (Firefox: View → Zoom → Zoom Text Only), because fixed heights often break there first.
Related WCAG criterion
1.4.4 Resize Text, Level AA. Related: 1.4.10 Reflow, which requires content to work at 320 CSS pixels wide without scrolling in two directions, and 1.4.12 Text Spacing.
How Reviseberg reports it
Reviseberg runs meta-viewport on every crawled page at 1280px and again at 360px. The tag is the same at both widths, and a finding seen in both passes is counted once. Because the tag lives in the template, the finding usually appears on every page. The issue list shows the rule with its severity, WCAG criterion 1.4.4 and level, the number of pages, and the points you get back by fixing it; the detail view shows the HTML snippet with the exact content value and every affected page. You can mark a finding as "ignore", "can't fix" or "false positive" with a reason; every decision is logged.
A page with no viewport tag at all passes this rule; Reviseberg's separate SEO module reports a missing viewport tag on its own score. And a clean result does not settle 1.4.4: whether text resizes without loss needs a person, so the criterion stays untested until a manual result is recorded.