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:
How this audit fails
Lighthouse checks that there's a
<meta name="viewport"> tag in the
of the document. It also checks that the node contains a
and that the value of this attribute contains the text
it does not check that
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.
Add a viewport
<meta> tag in the
<head> of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
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:
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.