Many websites are still using a viewport meta tag like one of the following:
These days, you can almost certainly remove the
user-scalable properties, to leave:
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.
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
maximum-scale=1 became widespread because of several browser bugs which are now irrelevant or best addressed with other fixes:
position:fixedonly 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
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
Rick Strahl has a comprehensive post on better fixes to this, which are basically:
font-size: 16pxor 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!