没有带 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
设置用户访问页面时的初始缩放级别。
资源 #
- 具有带
width
或initial-scale
的<meta name="viewport">
标记审计的源代码 - 响应式网页设计基础
- 使用 viewport meta 标记控制移动浏览器上的布局
Last updated: — Improve article