The viewport <meta> tag has a maximum-scale set

This means that the URL in question contains a viewport <meta> tag with a maximum-scale set.

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.

Maximum-scale is an optional attribute for the viewport, and it defines the maximum zoom that website users are able to do. Setting a value for the 'maximum-scale' attribute could prevent the user from scaling properly, meaning that users may not be able to zoom in/out on mobile devices, and may cause accessibility issues.

What does the Hint check?

This Hint will trigger for any internal URL which contains a viewport <meta> tag with a maximum-scale set.

Examples that trigger this Hint:

This Hint would trigger for any URL that has a viewport <meta> tag in the <head>, with the maximum-scale attribute set:

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.4">
...
</head>
<body>...</body>
</html>

How do you resolve this issue?

Maximum-scale is designed to prevent the user from zooming too far in on a page, and is not intrinsically bad, however it is relatively easy to accidentally set up the viewport so that the maximum-scale disables using from zooming at all, so it is generally not recommended. For this reason, Apple decided to ignore the declarations of user-scalable, minimum-scale, and maximum-scale, as of iOS 10.

The recommended, 'safe' viewport setting is:

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

Further Reading

Ready to try Sitebulb?
Start your free 14 day trial now

Start Free Trial