DEV Community

Kai Mercer
Kai Mercer

Posted on

Do not disable pinch zoom on your landing page: a one-line viewport check

A lot of landing page templates ship with a viewport tag like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Enter fullscreen mode Exit fullscreen mode

It stops pinch zoom, usually to avoid an accidental zoom on a form field. The cost lands on the people who rely on zoom to read.

What the sources say

MDN's viewport documentation warns that setting user-scalable to no prevents people with low vision from reading and understanding page content. It notes WCAG requires a minimum of 2x scaling, and that 5x is the best practice. It also says iOS 10+ ignores these restrictions by default, so on some devices the tag does less than you expect, and on others it does exactly the harm.

The related WCAG criterion is 1.4.4 Resize Text. Text must be resizable up to 200 percent without assistive technology and without loss of content or functionality. The author's job is not to get in the way of the browser's own zoom.

The check

  1. Search your templates and layouts for user-scalable=no and for maximum-scale below 5.
  2. Replace the tag with <meta name="viewport" content="width=device-width, initial-scale=1">.
  3. If the original reason was form fields zooming on focus, fix that instead: on iOS Safari this commonly happens when an input's font size is under 16px, so set inputs to at least 16px.
  4. Open the page on a phone, pinch to zoom in, and scroll around. Nothing should be clipped or stuck.
  5. Set browser text size to 200 percent and check that buttons and labels still fit.

What this does not cover

This is a quick check, not an audit. It does not test zoom behavior across every browser and device, and the 16px input detail is a common cause rather than a guarantee. Test on the devices your visitors use.

Sources: MDN viewport meta, W3C Understanding SC 1.4.4

Top comments (0)