手机友好性检测如何排查按钮间距过小？

手机上点击“发送询盘”却碰到旁边的 WhatsApp 图标，展开菜单时总点进相邻栏目，这类问题应从实际可点击区域、相邻区域距离和页面布局三个方面排查。按钮看起来有空隙，并不代表触控区域没有挤在一起；图标视觉上很小，也可能已经拥有足够大的点击范围。

通过 check for mobile friendly 查找检测方法时，别只停留在工具的通过或报错结果。先定位哪个页面、哪种屏幕宽度、哪个操作状态容易误触，再用浏览器检查元素尺寸，最后用真机验证，才能判断该增加内边距、拉开间隔，还是调整整组按钮的排列。

先找到误触发生的位置和状态

排查外贸网站或营销落地页，可以从直接影响询盘与购买的操作开始：顶部导航、产品筛选、表单提交、购物车数量控制，以及底部固定的电话、聊天和询盘入口。特别留意悬浮客服、Cookie 提示与底部操作栏同时出现的情况，它们可能遮住原本可以正常点击的按钮。

不要只检查首页初始画面。进入产品详情页，展开菜单，打开筛选面板，再让表单出现校验提示。同一组按钮在默认状态下间距充足，展开后却可能被新增内容挤到一起。多语言站还应检查文字较长的版本，避免翻译后按钮换行、相邻链接贴近。

记录问题时，至少保留页面地址、屏幕宽度、操作步骤和误触对象。例如“产品详情页打开底部询盘栏后，点击关闭按钮容易触发聊天入口”，比“移动端按钮太密”更方便开发人员复现。

看清点击边界，再判断尺寸是否合适

在浏览器开发者工具中切换到移动设备模拟视图，用元素选择器定位按钮，查看它的盒模型、宽高和周围元素。测量应以实际承接点击的链接或按钮为对象，不能只看内部图标、文字，也不能把外围装饰容器的尺寸当成点击尺寸。

例如，一个图标位于宽大的色块中央，如果只有图标本身可以点击，色块并没有扩大触控范围。相反，通过内边距扩大按钮后，即使图标保持原样，手指也更容易命中。还要检查绝对定位元素和透明遮罩，确认视觉空白处是否被其他控件占用。

判断尺寸时，可以参考 WCAG 2.2 的“目标尺寸（最小值）”要求：指针输入目标原则上至少达到 24×24 CSS 像素，同时存在间距、行内链接等例外。较小目标是否符合间距例外，需要按标准规定的圆形区域判断，不能简单理解为“两个按钮之间留出固定几像素就达标”。

对于提交询盘、加入购物车等高频操作，可以把接近或达到 44×44 CSS 像素作为设计目标，为手指点击留出余量。尺寸达标也不能替代操作验证：相邻按钮承担的动作越容易混淆，越需要清楚的间隔与视觉区分。

根据原因修改，避免越放大越拥挤

按钮间距过小，未必只需要增加外边距。先判断是触控区域偏小、容器空间不足，还是浮层发生遮挡，再选择修改方式。

• 图标或文字只有很小一块能点：优先给链接或按钮增加内边距，并设置合适的最小宽高。让图标周围的留白也属于同一个点击目标。
• 一排按钮已经挤满屏幕：调整为换行、纵向排列，或减少同屏展示的次要入口。继续放大按钮可能造成横向溢出。
• 相邻目标容易混点：用布局间距或外边距拉开距离，同时检查放大后的点击区域有没有重叠。仅增加文字间隔，未必能改善点击边界。
• 悬浮入口挡住页面操作：调整位置、占位空间或出现条件，让客服入口、底部栏与系统安全区域保持合理关系。

对操作人员来说，导航菜单、分页数字和表单附近的小字链接容易漏查。正文段落中的行内链接有不同的判断条件，不必一律改成大按钮；但并排放置的“返回”“提交”“清空”等独立操作，应逐个检查点击范围。

修改时还要保留清晰的动作层级。询盘表单中的提交与重置如果紧贴摆放，即使都做大，也可能增加误操作机会。可以先判断次要操作是否必须保留，再调整布局；不要为了让检测结果通过，把所有按钮统一扩大后就结束。

复测要覆盖真实操作，不能只看截图

浏览器模拟适合定位布局问题，但鼠标点击精度与手指不同。修改后，应在真机上完成一遍主要操作：打开导航、切换产品、填写表单、关闭弹层并提交。留意滚动后固定栏的位置，以及软键盘弹出时提交按钮是否被遮挡。

复测应包含窄屏、较宽手机屏幕和文字较长的语言版本。检查横向滚动、按钮文字换行、页面缩放与横竖屏切换后的布局。若页面没有正确设置 viewport，或为了塞入更多内容而整体缩小显示，也应先处理这些基础问题，否则局部加间距仍难以改善体验。

自动检测报告可以帮助发现部分尺寸和布局问题，但无法完整判断手指操作感受，也可能遗漏交互后才出现的控件。早期教程中提到的 Google 移动设备适合性测试工具已停止提供服务，排查时可结合浏览器开发者工具、可访问性检查工具与真机操作。

交付验收时，把“按钮间距已调整”改成可复现的检查结果：在哪些页面、哪些屏幕宽度和语言下，完成哪些操作，原有误触是否消失。对于承担广告流量或询盘转化的页面，先修复提交、联系和购买路径上的阻碍，再处理次要入口，能让修改顺序更贴近业务损失。