网站移动端外观正常却无法通过移动友好测试，求排查建议

嘿，我来帮你捋捋可能漏掉的细节——毕竟Google的移动友好测试可不止检查按钮可读性和间距这几项：

• 视口(viewport)配置错误：这是移动端适配最容易踩的坑！如果你的页面里没加正确的视口元标签，浏览器会默认用桌面端的视口宽度渲染，直接导致移动端显示异常。正确的配置应该是：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  检查下有没有漏加，或者参数写错了（比如误加了user-scalable=no，现在这个设置可能会触发测试失败）。

• 正文文字尺寸不达标：即使按钮没问题，正文文字如果小于16px，移动端用户必须缩放才能看清，这会被测试判定为不友好。建议正文默认字体用至少16px，尽量用rem/em这类相对单位，方便适配不同设备。

• 触控目标的可点击区域不足：你说按钮间距合理，但可能按钮的实际可点击范围太小了！Google要求触控目标至少48x48px，且间距不少于8px。比如有些按钮只是文字加了点击事件，周围没加足够的padding，或者用了小图标当按钮却没设置足够的点击区域，这些都可能导致测试失败。

• 固定元素遮挡内容：如果页面有固定顶部导航、底部栏，有没有给正文内容加足够的内边距？比如固定顶部栏高度是60px，正文就需要设置padding-top: 60px，否则页面顶部的内容会被挡住，测试工具会判定内容不可访问。

• 布局未适配极小屏幕：你说没有内容超出屏幕，但可能某些区块用了固定宽度（比如width: 1200px），没设置max-width: 100%，在320px宽的旧手机上还是会溢出。另外flex布局要记得加flex-wrap: wrap，避免元素挤在一行导致横向滚动。

• 禁用缩放的设置问题：如果视口标签里加了maximum-scale=1.0或者user-scalable=no，虽然看起来是强制适配，但Google会认为这限制了用户的缩放需求，从而不通过测试。除非有特殊业务需求，尽量不要禁用缩放。

• 媒体资源未自适应：图片、视频、iframe这些元素有没有设置max-width: 100%？如果用了固定宽度的图片，在小屏幕上会超出容器，哪怕你肉眼没注意到，测试工具也能检测到。

• JavaScript导致的布局异常：有些动态加载的内容或者交互脚本，可能在移动端触发时改变了布局，比如弹窗遮挡、元素偏移。可以试试禁用JavaScript后再跑测试，如果能通过，就去排查JS代码里的移动端适配问题。

内容的提问来源于stack exchange，提问作者viscosho