Why does this matter?
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit mobile screens. Setting the viewport enables you to control the width and scaling of the viewport.
Lighthouse displays the following failed audit if your content has a scaling issue when displaying on mobile devices: Has a Viewport Meta Tag With width or initial-scale.
Add a viewport tag to the head of your page
Add a viewport
<meta> tag in the
<head> of your page.
<title>Mary's Maple Bar Fast-Baking Recipe</title>
<meta name="Description" content="Mary's maple bar recipe
is simple and sweet, with just a touch of serendipity. Topped
with bacon, this sticky donut is to die for.">
<meta name="viewport" content="width=device-width, initial-scale=1">
Here's what each key value pair does:
|Key value pair||Description|
||Sets the width of the viewport to the width of the device.|
||Sets the initial zoom level when visiting the page.|
Don't use a maximum scale value, since that disables zoom. Also, keep in mind that adding a meta viewport tag like this will break layouts for non-responsive sites that use fixed widths.
Run the Lighthouse SEO Audit (Lighthouse > Options > SEO) and look for the results of the audit Has a Viewport Meta Tag width or initial-scale.
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.