Web HIG tip #8: Don't disable browser zoom

[frozonfreak]

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">

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.

• GitHub: Web HIG tip #8: Don't disable browser zoom #18
• Hashnode: https://thewebhig.hashnode.dev/dont-disable-browser-zoom-web-hig-tip-8
• Dev.to: https://dev.to/frozonfreak/dont-disable-browser-zoom-web-hig-tip-8-k5n
• Bluesky: https://bsky.app/profile/sastha.bsky.social/post/3mxgb7krp7c2o