用AI编程助手给站点做移动端体验专项体检：自动检测视口、点击间距与字体可读性

移动端体验问题往往藏在细节里：视口没设对导致页面缩放、按钮太小误触、字体太小看不清。人工逐页检查费时费力，而主流AI编程助手（如GitHub Copilot、Cursor、Claude Code）已经能读代码、跑脚本、给修复建议。这次我拿一个日活约2万的资讯站做实验，用AI助手完成一次移动端专项体检，全程约40分钟，输出一份可执行的修复清单。

先明确体检范围和工具分工

体检对象是站点首页、列表页、文章详情页三类模板，覆盖约85%的移动端流量。工具分工如下：AI助手负责生成检测脚本、解读结果、给出代码级修复方案；浏览器开发者工具负责实际渲染验证；Lighthouse提供辅助参考。

用AI助手生成检测脚本

把需求拆成三句话喂给AI助手：扫描指定页面、按上述标准检查、输出JSON格式的问题列表。以Cursor为例，在项目根目录新建mobile-audit.js，让AI生成基于Puppeteer的脚本。提示词可以这样写：

用Puppeteer写一个脚本，访问urls.txt里的每个页面，
设置视口375x667，检测：
1. meta viewport是否包含width=device-width；
2. 所有a、button、input的宽高是否小于44px或相邻间距小于8px；
3. 正文p标签的font-size是否小于16px或line-height小于1.5倍。
输出JSON数组，每项包含url、问题类型、元素选择器、当前值。

AI生成的初版脚本通常能用，但有两处要手动改：一是把page.waitForTimeout换成waitForNetworkIdle，避免异步内容漏检；二是排除隐藏元素，否则会误报大量display:none的按钮。

跑完脚本，三类问题的实际分布

脚本跑完输出37条问题，汇总后分布如下。这个站点的视口配置整体合格，问题集中在点击目标和字体上，和多数中小站点的情况接近。

分享按钮的问题最典型：图标按钮只有28×28px，两个按钮间距4px，拇指误触率很高。标签云的链接字号12px且行高1.2，在iPhone SE上几乎连成一片。

让AI输出可执行的修复清单

把JSON结果贴回AI助手，要求它按「问题—影响—修复代码」三列输出清单。以下是AI给出、我人工复核后的部分条目：

1. 活动页缺少viewport：在<head>首行插入<meta name="viewport" content="width=device-width, initial-scale=1">，并检查是否有旧模板覆盖。
2. 分享按钮尺寸不足：将图标按钮改为min-width:44px; min-height:44px，用flex的gap:8px控制间距，图标本身保持24px居中。
3. 标签云字号与行高：链接字号提到14px，行高1.5，容器加padding:4px 0拉开纵向距离。
4. 注释文字过小：正文注释从12px提到14px，行高1.6，颜色对比度同步检查到4.5:1以上。

AI给出的修复代码要逐条在真机或模拟器上验证，尤其是flex gap和min-height组合，在部分旧版安卓WebView上表现不一致。

把体检固化成日常流程

一次体检只能解决存量问题。把这个脚本挂到CI里，每次合并到主分支前跑一遍，输出报告作为构建产物。阈值可以按站点实际情况调整，比如电商站把点击目标标准提到48px。日常网站管理里，这类自动化检查比人工抽查稳定得多。

AI编程助手在这个流程里的价值不是替你决策，而是把「写检测脚本—解读数据—生成修复代码」的重复劳动压缩到几十分钟。你仍然要判断哪些问题值得修、哪些是误报。建议每季度做一次全量体检，每周跑一次增量检查，移动端体验的短板就不会积累成事故。