Has a viewport tag with width or initial-scale

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit the mobile screens. Lighthouse flags pages without a viewport:

Lighthouse audit shows page is missing a viewport
Fig. 1 — Page is missing a viewport

How this audit fails

Lighthouse checks that there's a <meta name="viewport"> tag in the <head> of the document. It also checks that the node contains a content attribute and that the value of this attribute contains the text width=. However, it does not check that width equals device-width. Lighthouse also does not check for a initial-scale key-value pair.

Each PWA audit is weighted equally in the Lighthouse PWA Score, with the exception of three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, Each page has a URL. Learn more in The Progressive Web App score.

Recommendations

Add a viewport <meta> tag in the <head> of your HTML:

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>

The width=device-width key-value pair sets the width of the viewport to the width of the device. The initial-scale=1 key-value pair sets the initial zoom level when visiting the page.

Why you should include a viewport

Setting the viewport enables you to control the width and scaling of the viewport. Check out the following links to learn more:

More information

Page doesn't have a viewport audit source

Last updated: Improve article