没有带 width 或 initial-scale 的 <meta name="viewport"> 标记
— 更新日期
许多搜索引擎根据页面对移动设备的友好程度对页面进行排名。如果没有 viewport meta 标记，移动设备会以典型的桌面屏幕宽度呈现页面，然后缩小页面，使其难以阅读。
设置 viewport meta 标记可让您控制视口的宽度和缩放比例，以便在所有设备上正确调整大小。
Lighthouse viewport meta 标记审计失败的原因 #
Lighthouse 会标记出没有 viewport meta 标记的页面：
除非满足以下所有条件，否则页面将无法通过审计：
- 文档的
<head>包含<meta name="viewport">标记。 - viewport meta 标记包含
content属性。 content属性的值包括文本width=。
Lighthouse不会检查 width 是否等于 device-width，也不会检查 initial-scale 键值对。但是，您仍然需要同时包含这两个信息，才能让页面正确呈现在移动设备上。
如何添加 viewport meta 标记 #
将带有适当键值对的 viewport <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设置用户访问页面时的初始缩放级别。
资源 #
Last updated: — Improve article