没有具有宽度或初始缩放的标记
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
如果没有视口元标记,移动设备会以典型的桌面设备屏幕宽度呈现网页,然后再按比例缩小网页,这使得它们难以阅读。
通过设置视口元标记,您可以控制视口的宽度和缩放比例,以使其在所有设备上都能正确调整大小。
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 毫秒的延迟。因此,如果初始规模设置为小于 1,则审核也会失败。
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-05-27。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-05-27\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-05-27。"],[],[]]