Multiple viewport <meta> tags were found in the <head>
This means that the URL in question contains multiple viewport <meta> tags in the <head>.
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.
Only one viewport tag is required, and if more than one is used this could lead to the wrong one being selected, which may cause rendering issues on mobile devices.
What does the Hint check?
This Hint will trigger for any internal URL which contains multiple viewport meta tags.
Examples that trigger this Hint:
This Hint would trigger for any URL that has more than one viewport <meta> tags in the head:
How do you resolve this issue?
There is no need to define more than one viewport, so reduce them down to just 1.
It is possible to target the viewport for multiple screen sizes, with just a single viewport, e.g.
<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
