Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

HTML 具有视口元标记

为什么说此审查非常重要

如果没有视口元标记,移动设备将以典型的桌面设备屏幕宽度渲染页面,然后对页面进行缩放以适合移动设备屏幕。 通过设置视口,您可以控制视口的宽度和缩放比例。查看以下链接可了解详情:

如何通过此审查

在 HTML 的 <head> 中添加一个视口 <meta> 标记。

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

width=device-width 键值对将视口宽度设置为设备宽度。 在访问页面时,initial-scale=1 键值对设置初始缩放级别。

如何实现此审查

本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。

Lighthouse 检查文档的 <head> 中是否有 <meta name="viewport"> 标记。 它也会检查此节点是否包含 content 属性,且该属性值是否包含文本 width=。 不过,它不会检查 width 是否等于 device-width。 Lighthouse 也不会检查 initial-scale 键值对。