没有具有宽度或初始缩放的标记

许多搜索引擎根据网页在移动设备上的适合性进行排名。 如果没有视口元标记，移动设备会以典型的桌面设备屏幕宽度呈现网页，然后再按比例缩小网页，这使得它们难以阅读。

通过设置视口元标记，您可以控制视口的宽度和缩放比例，以使其在所有设备上都能正确调整大小。

Lighthouse 视口元标记审核如何失败

Lighthouse 标记没有视口元标记的网页：

Lighthouse 审核显示页面缺少视口

除非满足以下所有条件，否则网页无法通过审核： - 文档的 <head> 包含 <meta name="viewport"> 标记。 - 视口元标记包含一个 content 属性。 - content 属性的值包含文本 width=。

如何添加视口元标记

将包含相应键值对的视口 <meta> 标记添加到网页的 <head>：

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

每个键值对的作用如下： - width=device-width 将视口的宽度设为设备的宽度。 - initial-scale=1 用于设置用户访问页面时的初始缩放级别。

资源