Missing viewport <meta> tag in the <head>
This means that the URL in question does not contain a viewport <meta> tag 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.
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.
What does the Hint check?
This Hint will trigger for any internal URL which contains no viewport <meta> tag in the <head>
How do you resolve this issue?
If the pages in questions are not designed to be viewed on multiple different devices (e.g. there is a separate mobile site), then this Hint can be safely ignored. However, pages designed for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.
Add a viewport in the <head> of the document:
<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
