移动端

为什么你的网站在手机上可能显得渺小又缩小

从访客屏幕这一端来看,网站在移动端「感觉坏掉了」的最常见原因。

这是什么

这项检查涉及的是我们在另一篇 viewport 指南中从更技术性角度解释过的同一个 viewport 元标签,但这里是从移动访客实际体验的角度来看:如果没有它,手机浏览器会假设页面是为宽得多的桌面屏幕设计的,把整个结果缩小以适应屏幕,这就是为什么一个没做准备的页面在手机上会显得又小又「缩放过度」,直到有人用手指捏合放大。

对于今天的大多数网站,尤其是那些已经真正内置了响应式设计的网站,这纯粹是一个缺失配置的问题,而不是设计问题——响应式布局已经存在,只是从未得到机会被激活。

为什么重要

在今天的大多数网站上,移动访客占总流量的一半以上,所以这样一个根本性的移动渲染问题绝不是一个小小的边缘情况——它非常常见地影响着访问该网站的大多数人。一个在手机上看到页面显得破损、拥挤、难以浏览的访客,比起去费力捏合缩放来阅读正常大小文字,明显更倾向于直接离开。

由于这个具体问题在被检查的那一刻就非常直观地显而易见(只需在手机上打开网站),所以一旦底层设置被修正,它也是最快能确认已经修复的事情之一。

如何解决

  1. 在实际手机上打开你的网站,或使用浏览器内置的移动预览/设备工具栏(通常在开发者工具中可以找到)。
  2. 如果页面看起来像是一个缩小版的桌面布局,而不是正确调整过大小的移动布局,这个设置很可能就是原因。
  3. 查看我们的技术 viewport 指南获取确切的代码修复方法——一个 <meta name="viewport"> 标签几乎能在所有情况下解决这个问题。
  4. 如果你使用的是网站建设工具(Squarespace、Wix、Webflow、WordPress),这几乎在所有情况下都会由平台自动设置——这里标签缺失几乎总是意味着有一个自定义代码嵌入覆盖了它,所以检查一下你添加过的任何自定义代码。
  5. 修复后在手机上重新检查页面,确认文字和布局现在无需缩放就能正确显示合适的大小。

看看你自己的网站是否也有这个问题

Launch Readiness 会在几秒内检测你的网站是否存在此问题以及其他约 50 个上线前的问题——免费,无需注册。

立即免费检测