What happens when users zoom to 200%?

Some would argue that zoom support is an edge case, but more users zoom in when using your website on mobile than you might think.

People with visual impairments rely on zoom to read content. However, this is also true for people with aging eyes, those trying to read on their phones in bright sunlight, or users dealing with temporary vision issues after eye surgery.

WCAG requires websites to function properly at 200% zoom without forcing horizontal scrolling. This means users should be able to complete key tasks without having to scroll left and right to see content.

What typically breaks at high zoom levels? Here are the issues I see most often:

• Text gets cut off or disappears entirely
• Navigation menus become unusable
• Form fields stack in awkward ways
• Fixed-width content forces annoying horizontal scrolling

There is one issue in a category of its own, and that’s disabling zoom altogether with a restrictive viewport tag. If your site uses something like the example below, you’re actively preventing users from zooming.

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

The maximum-scale=1 and user-scalable=no parameters disable zoom functionality entirely. Stick with the basic width=device-width, initial-scale=1 and let users zoom when they need to.

Fixing zoom issues is usually straightforward, but it often requires technical changes:

• Use relative units like em, rem, or percentages instead of fixed pixel widths for text and containers
• Test your responsive breakpoints to make sure they account for zoomed content
• Pay special attention to forms and navigation elements at high zoom levels

When zoom works properly, it creates a better user experience for everyone. When it doesn’t, you’re creating unnecessary barriers for users who need that functionality most.