No <meta name="viewport"> Tag with Width or Initial-scale

1 min read

Lighthouse flags the web page when it encounters such a situation:

No <meta name="viewport"> Tag with Width or Initial-scale

The following situations encountered as a result of the examination may cause this:

  1. The <meta name = "viewport"> tag in the title field of the document,
  2. Viewport meta tag seen with the content attribute,
  3. The value that the content attribute has should contain width = text.

A quick note: If the width is equal to the width of the device, Lighthouse may not include it in the audit. Also, whether it is an initial-scale key-value pair or not is not included in the audit by Lighthouse. However, both should be on your website.

How to pass the audit – Adding viewport meta tag

In order to pass through the audit, the viewport <meta> tag must be added to the <head> tag of your page. Also, this tag must be supported with the correct key-value pairs. See:

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

So why are key-value pair options important?

  1. Because they ensure that the width of the view area is adjusted according to the device.
  2. Also, if initial-scale = 1, the user will see the initial zoom value when visiting the page.

Test Your Website Performance!

You can quickly analyze your site in a minute