Many websites are still using a viewport meta tag like one of the following:

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

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

These days, you can almost certainly remove the maximum-scale or user-scalable properties, to leave:

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

This is the same as suggested by HTML5 boilerplate, so it should be a pretty good default for most people.

Why should you remove these properties? Because they’re bad for accessibility — they stop users on many mobile devices (mostly Android) from being able to zoom in and view things that would be too small otherwise. This doesn’t just affect people with impaired vision — as a fully sighted person I often find web pages where there are graphics with text and other details that are too small when using a mobile phone, and then I find I can’t zoom in either.

Who says so? The A11Y Project says “Never use maximum-scale=1”, and MDN also agree:

maximum-scale: Any value less than 3 fails accessibility

…

user-scalable: Setting the value to 0, which is the same as no, is against Web Content Accessibility Guidelines (WCAG).

The final question, then, is “Can you?”.

If you are like me you don’t want to remove something that was clearly added for some reason, which is a good instinct — see Chesterton’s fence. As far as I can tell, the practice of adding user-scalable=no or maximum-scale=1 became widespread because of several browser bugs which are now irrelevant or best addressed with other fixes:

• Using CSS position:fixed only works in Android 2.1 thru 2.3 by using the following meta tag: <meta name="viewport" content="width=device-width, user-scalable=no"> (from caniuse.com)

  This should not be relevant to most users these days.

• Safari on iOS, at least in the past, would “zoom in” when flipping from portrait to landscape, unless you added maximum-scale=1

  From what I can tell, this bug is probably fixed, and you get good behaviour when adding just initial-scale=1

• Safari on iOS has unhelpful zooming behaviour when you click on a text box and the keyboard pops up, which some people fix using maximum-scale=1.

  Rick Strahl has a comprehensive post on better fixes to this, which are basically:

  • selectively add maximum-scale=1 to the viewport tag, only on iOS Safari, using a small bit of Javascript. This works without breaking accessibility, because iOS Safari apparently ignores maximum-scale=1 when it comes to user-initiated zooming

  • setting font-size: 16px or higher for form inputs.

There are a couple of final cases to address:

• Some people want pages to behave more like native apps, where zooming wouldn’t even be possible. Before you do this, consider that you are making problems for many people across your site for the sake of your own aesthetic preference. And, it doesn’t work for recent iOS anyway because it deliberately ignores the properties for the sake of accessibility.

• You may need to control how zooming gestures work for certain components on the page. I believe the correct solution in this case is touch-action.

That’s all, thanks!