Skip to content
学习 衡量 博客 Case studies 关于
本页内容
  • Lighthouse viewport meta 标记审计失败的原因
  • 如何添加 viewport meta 标记

没有带 width 或 initial-scale 的 <meta name="viewport"> 标记

May 2, 2019 — 更新日期 Aug 20, 2019
Available in: Español, 한국어, Português, English
Appears in: PWA 审核|SEO 审核
本页内容
  • Lighthouse viewport meta 标记审计失败的原因
  • 如何添加 viewport meta 标记

许多搜索引擎根据页面对移动设备的友好程度对页面进行排名。如果没有 viewport meta 标记,移动设备会以典型的桌面屏幕宽度呈现页面,然后缩小页面,使其难以阅读。

设置 viewport meta 标记可让您控制视口的宽度和缩放比例,以便在所有设备上正确调整大小。

Lighthouse viewport meta 标记审计失败的原因 #

Lighthouse 会标记出没有 viewport meta 标记的页面:

Lighthouse 审计显示页面缺少 viewport

除非满足以下所有条件,否则页面将无法通过审计:

  • 文档的 <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 设置用户访问页面时的初始缩放级别。

资源 #

  • 具有带 width 或 initial-scale 的 <meta name="viewport"> 标记审计的源代码
  • 响应式网页设计基础
  • 使用 viewport meta 标记控制移动浏览器上的布局
Last updated: Aug 20, 2019 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.