这是什么
这项检查涉及的是我们在另一篇 viewport 指南中从更技术性角度解释过的同一个 viewport 元标签,但这里是从移动访客实际体验的角度来看:如果没有它,手机浏览器会假设页面是为宽得多的桌面屏幕设计的,把整个结果缩小以适应屏幕,这就是为什么一个没做准备的页面在手机上会显得又小又「缩放过度」,直到有人用手指捏合放大。
对于今天的大多数网站,尤其是那些已经真正内置了响应式设计的网站,这纯粹是一个缺失配置的问题,而不是设计问题——响应式布局已经存在,只是从未得到机会被激活。
为什么重要
在今天的大多数网站上,移动访客占总流量的一半以上,所以这样一个根本性的移动渲染问题绝不是一个小小的边缘情况——它非常常见地影响着访问该网站的大多数人。一个在手机上看到页面显得破损、拥挤、难以浏览的访客,比起去费力捏合缩放来阅读正常大小文字,明显更倾向于直接离开。
由于这个具体问题在被检查的那一刻就非常直观地显而易见(只需在手机上打开网站),所以一旦底层设置被修正,它也是最快能确认已经修复的事情之一。
如何解决
- 在实际手机上打开你的网站,或使用浏览器内置的移动预览/设备工具栏(通常在开发者工具中可以找到)。
- 如果页面看起来像是一个缩小版的桌面布局,而不是正确调整过大小的移动布局,这个设置很可能就是原因。
- 查看我们的技术 viewport 指南获取确切的代码修复方法——一个
<meta name="viewport">标签几乎能在所有情况下解决这个问题。 - 如果你使用的是网站建设工具(Squarespace、Wix、Webflow、WordPress),这几乎在所有情况下都会由平台自动设置——这里标签缺失几乎总是意味着有一个自定义代码嵌入覆盖了它,所以检查一下你添加过的任何自定义代码。
- 修复后在手机上重新检查页面,确认文字和布局现在无需缩放就能正确显示合适的大小。