Skip to content
Learn Measure Blog Case studies About
On this page
  • How the Lighthouse viewport meta tag audit fails
  • How to add a viewport meta tag
  • Resources

Does not have a <meta name="viewport"> tag with width or initial-scale

May 2, 2019 — Updated Aug 20, 2019
Available in: Español, 한국어, Português, 中文, English
Appears in: PWA audits|SEO audits
On this page
  • How the Lighthouse viewport meta tag audit fails
  • How to add a viewport meta tag
  • Resources

Many search engines rank pages based on how mobile-friendly they are. Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.

Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

How the Lighthouse viewport meta tag audit fails #

Lighthouse flags pages without a viewport meta tag:

Lighthouse audit shows page is missing a viewport

A page fails the audit unless all of these conditions are met:

  • The document's <head> contains a <meta name="viewport"> tag.
  • The viewport meta tag contains a content attribute.
  • The content attribute's value includes the text width=.

Lighthouse doesn't check that width equals device-width. It also doesn't check for an initial-scale key-value pair. However, you still need to include both for your page to render correctly on mobile devices.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

How to add a viewport meta tag #

Add a viewport <meta> tag with the appropriate key-value pairs to the <head> of your page:

<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…

Here's what each key-value pair does:

  • width=device-width sets the width of the viewport to the width of the device.
  • initial-scale=1 sets the initial zoom level when the user visits the page.

Resources #

  • Source code for Has a <meta name="viewport"> tag with width or initial-scale audit
  • Responsive Web Design Basics
  • Using the viewport meta tag to control layout on mobile browsers
Last updated: Aug 20, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

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.