DEV Community

FrozonFreak
FrozonFreak

Posted on Originally published at thewebhig.hashnode.dev

Don't disable browser zoom (Web HIG tip #8)

#webdev #html #a11y

user-scalable=no stops a layout from shifting when someone pinches. It also stops a person who can't read small text from making it bigger.

Web HIG tip #8 (Quick #79): Do not disable browser zoom or pinch-to-zoom.

Why it matters

Zoom is how many people make the web readable:

  • People with low vision zoom to read text, check small details, and hit small targets
  • Everyone else zooms too, to read a tiny price, check a chart, or look at a photo
  • If zoom is blocked, people can't fix a text size that's too small for them, so they leave or squint
  • Locking zoom usually hides a layout problem instead of fixing it

The rule of thumb

Ask: if someone pinches or presses Ctrl and + (Cmd and + on a Mac), does the page get bigger?

If not, remove whatever is stopping it.

<!-- Don't: blocks pinch-to-zoom on mobile -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Do: set the width and starting scale, and leave zoom alone -->
<meta name="viewport" content="width=device-width, initial-scale=1">
Enter fullscreen mode Exit fullscreen mode

If zoom was blocked to stop iOS from zooming into small form fields, fix the cause instead. iOS Safari zooms in on a focused input when its font size is under 16px, so give inputs a font size of at least 16px.

Do this instead

  • Remove maximum-scale=1 and user-scalable=no from the viewport meta tag
  • Don't block zoom with JavaScript, such as cancelling pinch or Ctrl + wheel events
  • Size text in relative units such as rem, so browser text-size settings still apply
  • Build layouts that reflow cleanly when the page is zoomed, instead of locking the scale

Quick check for your app

Open one key screen on a phone and pinch to zoom in. Then open it on desktop and zoom to 200%. On both, the content should get bigger and stay usable, with nothing cut off or overlapping. Then search your code for user-scalable=no and maximum-scale=1.

The 200% check is its own rule: content must stay usable at 200% zoom (Quick #77). The full HIG (§5.1, Zoom & reflow) also asks that text be resizable without losing content, and that standard layouts reflow at 400% without horizontal scrolling where applicable.

The Web HIG is a behavioral contract for how the web should behave, not a component library. Design systems define how it looks. The Web HIG defines how it behaves.

Top comments (0)