Pinch-zoom is switched off

Why it matters

user-scalable=no or a low maximum-scale in the viewport tag tells a phone not to let the visitor zoom. For someone with poor eyesight, pinching to enlarge the text is how they read the web, and this one attribute takes it away. It usually arrives with a theme or a snippet copied to stop a form "jumping" on focus, not because anyone decided to.

Safari on iOS has ignored the setting since iOS 10, for exactly this reason. Chrome and other Android browsers still obey it unless the visitor has found the "force enable zoom" setting.

The guidelines ask that text can be enlarged to 200%, so we flag a maximum-scale under 2.

Source: WCAG 2.2, 1.4.4 Resize Text (Level AA); MDN: the viewport meta tag.

How to fix it

Take user-scalable and maximum-scale out. This is all the tag needs:

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

If it was added to stop iOS zooming into form fields on focus, the cure for that is a font size of at least 16px on the fields.

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

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

WarningThe viewport tag says maximum-scale=1, so the page can't be enlarged to twice its size, which is what someone with poor eyesight needs.

fail-maximum-scale

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

WarningThe viewport tag says user-scalable=no, which stops people pinching to enlarge the page on most Android browsers.

fail-user-scalable

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

PassedThe viewport tag lets people zoom.

pass-maximum-five

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

PassedThe viewport tag lets people zoom.

pass-plain