probeo

Why shouldn't the viewport tag disable zoom?

meta-viewport page

The issue

A viewport tag that disables zoom leaves people with low vision unable to enlarge text on a phone. Pinch-to-zoom is how many of them read the web, and on a page that blocks it the text stays the size the designer chose.

The cause is user-scalable=no, or a maximum-scale that is too low, in the <meta name="viewport"> tag. WCAG 1.4.4, Resize Text, requires text to be resizable to 200% without loss of content or function. A page with no viewport tag at all is a different problem, covered under viewport.

Scope

Each <meta name="viewport"> tag is checked. Two rules report it:

  • meta-viewport reports user-scalable=no or user-scalable=0, and a maximum-scale below 2.
  • meta-viewport-large, a best practice, reports a maximum-scale below 5, which stops people zooming to 500%.

A maximum-scale of 1 is reported by both.

How to check you have it

  • In probeo: the page reports the meta-viewport rule, “Zooming and scaling must not be disabled”, with critical impact, naming the setting at fault. The meta-viewport-large rule, “Users should be able to zoom and scale the text up to 500%”, reports with minor impact.
  • By hand: read the content of the viewport tag in the page source, then pinch to zoom on a phone.
  • With a tool: axe DevTools and Lighthouse both flag a viewport tag that disables zoom.

The fix

Remove user-scalable=no and maximum-scale from the viewport tag.

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

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

If zoom was disabled to stop a form field from enlarging the page on focus, set the field’s font size to at least 16px instead.

Done when: the viewport tag allows zoom to at least 500%, and the check above comes back clean.

Do not

  • Do not set maximum-scale to 1 to stop layouts shifting; fix the layout.
  • Do not block zoom with script or with touch-action rules instead.

FAQ

Do browsers honor user-scalable=no?

Some mobile browsers let people zoom anyway, and some don’t. A page shouldn’t depend on which one its visitor uses.

Why does maximum-scale 2 pass one rule and fail the other?

meta-viewport follows WCAG 1.4.4, which asks for 200%. meta-viewport-large is the best-practice version and asks for 500%.

Is this the same as the viewport SEO check?

No. The viewport check reports a page with no viewport tag. This one reports a tag that is present and blocks zoom.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.