Only 1 Viewport Meta Tag allowed on page

Last updated:

Impact: MODERATE
This evaluation is included in the Mobile Friendly test offered by ExcellentWebCheck. Ensuring that your website is mobile-friendly and responsive is crucial not only for enhancing the user experience but also for optimizing your site's SEO performance.

Why is only 1 meta viewport tag allowed on a web page?

A viewport meta tag should appear only once on a web page. Multiple meta viewport tags make it unclear for the browser which one is the correct viewport meta tag.

A viewport meta tag should look like this:

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

This meta tag is mobile friendly since it specifies that the width of the page should be the device width. Also, the initial-scale is 0, so the page is at normal zoom level when the page is loaded. The user can still zoom in which is a best practice.

What is the effect of multiple viewport meta tags?

Browsers pick one of the provided meta viewport tags. If one of the meta viewport tags is not mobile friendly, the effect might be that the page is rendered incorrectly.

 

Left an example of what happens when there is no or an invalid viewport tag, and on the right an example of a correct viewport meta tag
Was this article helpful?
Thanks for your feedback!

We are sorry to hear that you are not satisfied with the content on this page.

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.