The URL in question includes a viewport tag specifying 'user-scalable=no', which prevents the user from enlarging or reducing the page size.
Why is this important?
Viewing a website on different devices requires an adaptable viewport—the visible area of a webpage. The viewport tag advises the browser how to handle the dimensions and scale of the page.
The 'user-scalable' attribute determines if the page content can be zoomed on a mobile device. Disabling zoom with 'user-scalable=no' hinders accessibility, leading to a subpar user experience.
What does the Optimization check?
The Optimization identifies any page using a viewport tag that has 'user-scalable=no', therefore blocking page scaling.
Examples that trigger this Optimization:
Pages containing a viewport tag inside the tag with 'user-scalable=no' will trigger this Optimization.
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
...
</head>
<body>...</body>
</html>
How do you resolve this issue?
As zoom functionality is a standard feature on mobile sites, disabling it can compromise the user experience. iOS 10+, for instance, ignores 'user-scalable' settings.
To rectify this issue, simply omit the 'user-scalable' attribute from your viewport tag.
The advised viewport setting for best practices is:
<meta name="viewport" content="width=device-width, initial-scale=1">