Table of Contents
Using the viewport meta tag the wrong way can prevent people with low vision concerns from accessing your website or web app.
maximum-scale=1.0, you are disabling the functionality to use pinch zoom on certain mobile devices, forcing people to view your page a certain way.
The bad way
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
The good way
<meta name="viewport" content="width=device-width, initial-scale=1.0">
maximum-scale="1.0" allows your site to meet users' needs and provide a better experience.
In iOS 10, Apple changed its handling of
max-scale declarations. Their changes removed the effect on pinch-zooming, making it possible to pinch-zoom regardless of the
meta element's suggestions.
However, other effects of the declarations remain, like their effect on whether the browser automatically zooms into focused input elements. And other mobile browsers, including Chrome on Android, still forbid user zooming when a
maximum-scale="1.0" rule is present.
user-scalable attribute can also cause problems for people who use the built-in zoom functionality of their web browser.
The attribute is set as
user-scalable="yes" by default, which means that people are able to control the zoom setting for the page they're visiting. Changing it to
user-scalable="no" would prevent zoom settings from working on both mobile and desktop devices.
no to assure better accessibility of your site. Either leave it as default by not referencing the
user-scalable attribute, or set it to
This post was last updated by Eric Bailey.