The viewport <meta> tag prevents the user from scaling
This means that the URL in question contains a viewport <meta> tag with the attribute user-scalable set to '0' or 'no', which prevents the user from zooming in or zooming out.
Why is this important?
The browser's viewport is the area of the window in which web content can be seen. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The user-scalable attribute defines whether users can scale (zoom) the page content on mobile. By default, scaling is on, but if user-scalable is set to '0' or 'no' then this will prevent users from zooming, which negatively affects user experience (in most cases).
What does the Hint check?
This Hint will trigger for any internal URL which contains a viewport <meta> tag, with a user-scalable value which prevents the user from scaling.
Examples that trigger this Hint:
This Hint would trigger for any URL that has a viewport <meta> tag in the <head>, with the attribute user-scalable is set to '0' or 'no':
How do you resolve this issue?
Zooming is a common and expected 'allowed' behaviour on mobile web pages, so disabling it detracts from the mobile user experience. For this reason, Apple decided to ignore the declarations of user-scalable, minimum-scale, and maximum-scale, as of iOS 10.
It is straightforward to resolve this issue - simply remove the user-scalable attribute entirely.
The recommended, 'safe' viewport setting is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Further Reading
- Responsive Web Design Basics
- Using the viewport meta tag to control layout on mobile browsers
- Responsive Web Design - The Viewport
