移动友好度测试通过技巧：别再让手机用户点个按钮都要放大三次

你网站在电脑上看挺顺，一用手机打开——字小得要凑近屏幕，按钮点三下才中，图片横着滑半天……Google Search Console 一扫，红叉扎眼。别怀疑模板，问题就藏在你每天路过却没伸手碰过的那些细节里。

你的按钮是不是让用户想摔手机？

移动端最让人抓狂的，不是加载慢，是点不中。
按钮太小、挨太近、被遮一半——Google 的移动友好度测试对这些特别较真，只要判定“可点击元素过近”，直接标红。

我帮一个本地电商站排查时，发现首页“立即购买”按钮在手机上缩成米粒大，旁边还挤着三个同款按钮。站长自己拿手机试了试，当场叹气：“这谁点得准？”

解决方法：
所有可点击元素（按钮、链接、表单控件）最小尺寸至少 48x48px（CSS 像素）。这是 Google 官方明确写的硬指标。
按钮之间留够 8px 以上间距。别信“看起来差不多”，真用拇指戳一下——戳不准，就是不行。

真实案例：
一家做家政服务的本地网站，改完按钮尺寸和间距后，用户填完表单并成功提交的动作明显变多了。之前老有人点“提交”跳到其他页面，其实是手指误触了紧挨着的“返回”链接。

为什么你的字体在手机上像蚂蚁开会？

很多人以为“响应式=自动适配”，结果正文在手机上缩成 12px，用户得双指放大、拖着看、一行行找。
Google 要求很实在：移动端正文字体不能小于 16px（注意，是正文，不是标题）。很多 CMS 默认给移动端正文设的是 14px，甚至 12px——你看着清爽，用户看着费劲。

真实案例：
一个技术类博客，文章干货很多，但手机端跳出率一直下不去。我把正文从 14px 改成 18px，行高调到 1.6。一周后，用户平均往下拉得更深了，停留时间也拉长了不少。内容没动一个字，就调了两个 CSS 值。

额外提醒：
别只改前端 CSS。进后台看看：CMS 编辑器是否允许用户自定义字号？有些主题把字体写死在模板里，得去“外观→自定义→额外 CSS”，或者子主题里手动覆盖。

横向滚动是移动端的毒药，你还在喂？

见过最典型的：企业官网首页放一张 1200px 宽的 Banner 图，没加任何限制，手机一开，图直接撑出屏幕，用户得左右划拉才能看完。Google 测试工具会立刻报错：“内容宽度超出视口”。

常见源头就三个：

图片和视频：没加 max-width: 100%，或 <img> 标签写了固定 width="800"；
表格：桌面端五列的数据表，原封不动搬上手机；
代码块或长文本：没处理换行和溢出，一行代码顶破整屏。

解决方法：
给所有图片、视频、表格、代码块统一加这条 CSS：

img, video, table, pre, code {
  max-width: 100%;
  height: auto;
}

表格如果实在没法重排，至少加 overflow-x: auto，让它能横向滚动，而不是把整个布局顶歪。
别漏掉——尤其检查你文章里贴的截图、嵌入的 iframe、还有那些“复制即用”的代码片段。

真实案例：
一个程序员写的教程博客，每篇都有大段代码。手机打开，代码直接跑出屏幕右边，读者留言说“根本没法读”。我给 <pre><code> 加了 overflow-x: auto 和 white-space: pre-wrap，当天就有读者回帖：“终于不用截图放大看了”。

你的“可读性”在手机上可能等于零

移动友好度里的“可读性”，不只是字号大小。
它是你在地铁晃动、单手握机、阳光刺眼时，还能不能让人安静读完三句话。

三个高频翻车点：

行高太挤：移动端正文行高至少 1.5，1.6–1.8 更舒服。1.2 行高的文字，在手机上就像印在火柴盒侧面；
段落太长：桌面端一段 6 行没问题，手机上就是 10 行密麻麻。建议控制在 2–3 行；
链接没呼吸感：两个链接挨在一起，用户想点“预约咨询”，结果点中了“隐私政策”。不是手抖，是设计没留余地。

真实案例：
一个在线教育平台的课程页，手机端跳出率长期卡在高位。进去一看：每门课介绍都是 200 多字一大坨，没分段、没小标题、没项目符号。用户一打开，眼前一堵墙，直接退出。我把每段切到 2–3 句，加小标题、项目符号，段间距设为 16px。改完没几天，用户往下翻的比例涨了，报名动作也跟上来了。

核心逻辑：
移动端用户不是不想看，是拒绝在糟糕的排版里浪费耐心。你的内容结构，得像微信聊天一样——短句、分行、有空隙、重点一眼可见。

表单和输入框：移动端转化的最后一道坎

很多用户走到最后一步才放弃：看了半天内容，决定填表单，结果输入框太矮、键盘弹出来盖住按钮、点提交前还得手动往上拖……
Google 不会直接说“表单不合格”，但它会通过“可点击元素过近”和“视口配置错误”这两项把你打下来。

三个马上能改的细节：

输入框高度至少 44px ——太矮点不准，太高占地方。CSS 写一句就行：
```
input[type="text"], textarea { height: 44px; }
```
别用 placeholder 当标签：用户一打字，提示就没了，忘了填啥。标签必须常驻，放在输入框上方，或用浮动标签（floating label）；
键盘弹起时，输入框得滚进视野：加这一行 CSS 就能解决大多数问题：
```
input[type="text"]:focus { scroll-margin-top: 50px; }
```

真实案例：
一家本地家装公司，预约表单在手机上的完成率低得离谱。查下来发现：用户点“预约时间”时，键盘一弹，直接把底部的“提交”按钮盖住了。人填完，找不到按钮，以为页面卡死，直接关掉。后来我把提交按钮用 position: fixed 钉在屏幕底边，再配合 scroll-margin-top，用户填完就能立刻点，不用再找。

今天就能执行的 1 个操作

打开你正在用的手机，用 Safari 或 Chrome 访问自己的网站，然后做这三件事：

用食指逐个点一遍所有按钮和链接，试试能不能一次点中，有没有误触；
截一张全文页面图，放大看正文文字——它比你拇指指甲盖还窄吗？
把手机横过来再竖回去，看 Banner、图片、表格有没有错位、溢出、变形。

只要有一个动作让你皱眉、叹气、想骂人，今晚就改。
改完，立刻打开 Google Search Console → “增强功能” → “移动端易用性”，运行一次检测。红叉清零之前，别睡觉。
用户不会告诉你他们为什么走，但他们每一次关闭页面，都是投给你的一张沉默选票。

移动友好度测试通过技巧：别再让手机用户点个按钮都要放大三次#

你的按钮是不是让用户想摔手机？#

为什么你的字体在手机上像蚂蚁开会？#

横向滚动是移动端的毒药，你还在喂？#

你的“可读性”在手机上可能等于零#

表单和输入框：移动端转化的最后一道坎#

今天就能执行的 1 个操作#