Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Has A Viewport Meta Tag With width Or initial-scale

Why the audit is important

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit the mobile screens. Setting the viewport enables you to control the width and scaling of the viewport. Check out the following links to learn more:

How to pass the audit

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

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

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.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

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.