网站在电脑上完美无缺，一到手机上就变成了看不清的缩小版
打开手机访问网站，发现所有内容都缩得很小——整个桌面布局被挤进了 4 英寸的屏幕里。文字小得像蚂蚁，按钮根本点不到，只能拼命缩放。
修复方法只需要一行 HTML：
<meta name="viewport" content="width=device-width, initial-scale=1" />
没有这个标签，手机浏览器会默认你的页面是为桌面宽度设计的（通常是 980px），然后等比缩小来适配屏幕。哪怕你写了完美的响应式 CSS，没有 viewport 标签它也不会生效。
为什么这对 SEO 很重要
移动优先索引。 Google 使用你网站的移动版本作为索引和排名的主要版本。如果移动端体验有问题，排名就会受影响——即使是桌面端的搜索也一样。
核心 Web 指标。 没有 viewport 标签的页面很可能在 CLS（累积布局偏移）指标上不及格，因为浏览器需要重新计算布局。
用户体验指标。 看不清的文字和点不到的按钮意味着用户秒退。高跳出率告诉 Google 用户没有找到他们需要的内容。
Viewport 标签的作用
Viewport 标签告诉浏览器："这个页面是为移动端设计的，请使用设备的实际屏幕宽度，不要假装它是桌面端。"
标准写法：
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width— 将视口宽度设为设备的屏幕宽度initial-scale=1— 初始缩放比例为 100%
就这么简单。一个标签，放在每个页面的 <head> 里。
常见的 viewport 问题
| 问题 | 后果 |
|---|---|
| 完全没有 viewport 标签 | 浏览器按桌面宽度渲染，一切都变得很小 |
width 设为固定像素值 | 页面无法适配不同的屏幕尺寸 |
maximum-scale=1 或 user-scalable=no | 阻止用户缩放——无障碍访问问题 |
| 有 viewport 标签但 CSS 不是响应式的 | 单靠标签并不能让网站变成移动友好 |
关于无障碍访问的提醒
避免使用 user-scalable=no 和 maximum-scale=1。这些设置会阻止用户缩放页面，对视力不好的用户来说是个大问题。很多无障碍指南（WCAG）要求用户至少能放大到 200%。
如何在全站检查 viewport 标签
大多数现代网站已经做对了这一点，但还是值得验证——尤其是那些较老的页面或来自不同模板的页面。审计应该：
- 检查每个页面是否存在 viewport 标签
- 标记没有 viewport 标签的页面
- 检测有问题的 viewport 配置（固定宽度、禁用缩放等）
- 验证标签是否在
<head>中而非<body>中
Kaitico 会检查每个爬取页面的 viewport meta 标签，标记缺失或配置错误的标签，确保你的移动端体验不出问题。