Viewport Meta Tag not set
Last updated:
Why is a viewport meta tag important?
The <meta name="viewport" /> in the <head> tells the browser how the page should be rendered. The viewport communicates how the page should be scaled and sized to fit the screen of the device. For a responsive website it is necessary to set the <meta name="viewport" />.
How to fix issue “A Viewport Meta Tag must be set”?
Add a meta viewport tag to the <head> of your html page:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Note: you are supposed to have only one meta viewport tag!
What does this code do?
- width=device-width: this tells the browser that the width of the page should be set to the width of the device-width. A phone that has a width of
360pxrenders a page with~360pxof width. - initial-scale=1.0: sets the initial zoom level. This allows the user to zoom in.
It is important to set a viewport that allows zooming to allow people with low vision to zoom in. Therefore we recommend to not add other scale parameters to the viewport meta tag.
Do the Mobile Friendliness test
Checkout the ExcellentWebCheck services
ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.