如果没有视口元标记，移动设备将以典型的桌面设备屏幕宽度渲染网页，然后对网页进行缩小，导致用户很难看清其中显示的内容。
通过设置视口元标记，您可以控制 调整视口的宽度和缩放比例，以便其在所有设备上都能正确调整大小。
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 会在用户访问网页时设置初始缩放级别。
初始比例小于 1
如果 initial-scale 设为小于 1，可能会导致浏览器启用“点按两次进行缩放”功能，该功能通常用于未针对移动设备进行优化的桌面版网站。这会为任何点按互动添加 300 毫秒的延迟，同时浏览器会等待检查是否发生了第二次“双”点按。因此，如果将 initial-scale 设置为小于 1，审核也会失败。