Only 1 Viewport Meta Tag allowed on page

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.

Related resources

• Viewport not set