移动端兼容性测试：90%应用折戟第三步

　　上周三下午三点零七分，我盯着测试机上那台 iPhone SE（第二代）——屏幕右下角还留着上周五没擦掉的指纹油渍——点第三次“立即参与”按钮。首屏转圈、按钮点了没反应、控制台一片红。不是报错，是根本没 log；不是卡死，是点击事件压根没进 event loop。这时候会议室白板上还贴着三周前的需求脑图，最底下一行“兼容性兜底方案”被咖啡渍晕开了一半，字迹全糊了。

　　三个月之前，项目启动会刚散，产品把原型PDF甩进群，说“就按这个上线，H5活动页，7天联调完”。设计稿标注写的是「iPhone 12+ Safari 最新」，字体字号连行高都标得精确到小数点后一位——但没标 viewport scale 在 iOS 15.4 之后的 auto-zoom 行为变更。我没吭声。后端那边接口又在最后一天加了个字段，type 是 string，值却是 JSON 字符串套 JSON 字符串，前端 parse 两次才敢用。当时工位显示器竖着，方便看长列表接口返回，键盘上 Delete 键早掉了，我用回车键代替，敲空格时总不小心蹭到 Shift，切换成大写输入法，光标跳到上一行去。

　　第三步折戟。不是第一步——页面白屏没人管，我们能用 preload + defer 蒙过去；也不是第二步——安卓微信里 SVG 图标不渲染，改 inline 就完事；就是第三步：iOS 微信内置浏览器里，touchstart 绑在 document 上，再阻止默认行为，再触发自定义 drag 逻辑——这玩意儿在 iOS 16.6.1 之后，只要页面 scrollY > 0，第一次 touch 就被吞。没人测过真机滑动中触发交互，QA 那边跑的是 BrowserStack 模拟器，而模拟器里 touchcancel 根本不会触发。我在性能面板里反复点那个蓝色的 “Capture rendering frames”，最后一帧 timeline 下方写着：`Main Thread: 92ms (of which 81ms idle)`——idle 时间长得反常，说明它根本没干活，卡在某个 microtask 队列外头干等。

　　那天吵得最凶的是产品，她站在工位隔板旁，端着保温杯站了六分钟，杯口朝上，没喝一口。我说“你试试双指缩放页面再点按钮”，她试了三次，每次都弹出“请勿缩放页面”的提示层，而提示层 z-index 写的是 999999，但 iOS 微信里 z-index 在 position: fixed 元素上根本不生效，它实际叠在 body 底下。我翻出那次提交记录：`git show 4a7b3e2 — src/utils/touch-hijack.ts`，里面有一行注释：`// iOS WKWebView 中 preventDefault 后 touchend 丢失，临时用 timer fallback`——这行代码是我写的，也是我删的，因为后来发现 timer fallback 在低电量模式下直接延迟 3 秒以上。没人告诉我那天要开省电模式测试。

　　背后椅子被人蹭了一下，我回头，是测试组的小张，拎着两份没拆的外卖——一盒凉皮，一盒酸辣粉。没人去拿。他把盒子往我显示器旁边一搁，酸辣粉的塑料盖边缘磕在竖屏支架上，发出咔哒一声。我看他手机锁屏界面亮着，微信消息弹出来：“客户说他们老板在地铁里点不动，截图发群里了”。截图里时间戳是 16:22:07，设备型号写的是 iPhone XR，系统版本 iOS 17.2。我扫了眼自己本地 devtools 的 device emulation 列表——17.2 选项是灰色的。Xcode 命令行更新模拟器提示“no update available”，实际上 Xcode 15.2 自带的 iOS 17.2 runtime 只有命令行工具能装，UI 模拟器根本不认。我又点了一次“立即参与”，这次连转圈都不转了，按钮 hover 状态都没变。控制台终于挤出一行：`[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.`

文章配图，仅供参考

　　不是所有问题都能靠 polyfill 解。不是所有“兼容”都该由前端扛。iOS 微信 8.0.44 这个版本，WebView 内核用的还是旧版 WKWebView，但 UA 里硬写了 “Version/17.0”，搞得所有 feature detection 全崩。有人建议降级检测 UA 字符串，我试了，在 iPad mini 6 上直接触发了 `window.innerWidth === 0` 的 bug。不是 bug，是 Safari 在横屏动画过渡期的测量抖动——它就在那儿，文档里从不提，只有真机晃着拍视频才能复现。

　　现在我不让 QA 跑任何 BrowserStack 任务了。每天早上十点，我抽三台真机：iPhone SE II（15.7.8）、iPhone 13（16.7.8）、iPhone 15 Pro（17.4.1），全部开开发者模式，USB 连 Mac，Safari → Develop → [设备名] → 自动勾选 “Disable cache”，然后手点三次。必须手点。不能录脚本，不能 automation。上次自动化脚本跑出来的“通过”结果，和真实用户手指落点偏移 8px 的差，就是按钮没响应的全部原因。

　　我今晚回去，把键盘上缺的那个 Delete 键用热熔胶粘回去。明天上午九点前，把所有绑定 touchstart 的地方加上 `{passive: false}`，哪怕 ESLint 报 warn。下午去找产品，带着三台真机、一份导出的 performance trace、还有她那天没喝完的保温杯，问她：这个交互，要不要保？如果要，我得砍掉另一个动效，或者把 canvas 渲染改回 CSS transform。不选。只问要不要保。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!