没有带 width 或 initial-scale 的 <meta name="viewport"> 标记
Published on • Updated on
许多搜索引擎根据页面对移动设备的友好程度对页面进行排名。如果没有 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 键值对。但是，您仍然需要同时包含这两个信息，才能让页面正确呈现在移动设备上。
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
如何添加 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设置用户访问页面时的初始缩放级别。
资源
Updated on • 改进文章