昨天用AI给不受学英语的女儿做了一个闯关游戏技术栈简单到不好意思说**一个 index.html。没框架没打包没有 npm。**扔进 nginx 目录就能跑。但就是这么个东西我在真机上踩了三个坑。而且三个都是桌面浏览器完全正常、只有手机才暴露的那种。做出来几分钟调试完成花了一天的时间不是一直在搞坑 1微信里全程静音游戏里单词和句子都带发音。我在电脑上测了一路发到微信给女儿——一点声音都没有。查下来是这样安卓微信用的 X5 内核压根没有speechSynthesis这个对象。原来那句speechSynthesis.speak(...)直接抛异常被我 try/catch 吞了静默失败。iOS 微信有这个对象但经常没有可用的语音包调了也不出声。所以浏览器朗读这条路在微信里基本是死的。解法是预生成 mp3用 edge-tts 把每个单词、每个句子、每段对话的问答都生成好页面用audio播。36 个文件527KB。但这里还有个更隐蔽的坑。iOS/微信要求音频必须由用户手势启动。页面加载后自动播会被直接拦掉所以我在第一次 touch/click 时播一个 50ms 的静音 WAV 来解锁。按常理被拦下的朗读应该挂到静音音频播完的回调里补播。结果在某些环境下那个 promise 永远不 resolve——补播永远不发生。现象就是第一次进来没声音再点也没用。正解有被拦下的句子就直接在手势回调里播掉。既解锁又补播别绕那个 promise。下面是整个工程文件比刚开始一个html多生成了好多个mp3文件。坑 2CSS 的1fr有个隐藏下限第 5 关是翻卡配对4 列网格。我写的是grid-template-columns:repeat(4,1fr);看着是四等分。但这个1fr有个隐藏的最小值auto意思是**“这列至少要装下里面最长的、不换行的内容”**。卡片没翻开时里面只有一个 ❓四列各 67px岁月静好。一翻开playground这种 10 个字母的词塞进去、还不许换行——那一列立刻被顶到 100px。4 列总共424px而手机可用宽度只有292px。多出来的 132px 全跑到屏幕右边外面最右一列就消失了。现象特别有迷惑性没翻开时正常翻开就歪。改成repeat(4, minmax(0, 1fr))隐藏下限就没了。再给卡片加overflow:hidden兜底长单词按实际宽度循环缩字号。排查方法也记一下别用眼睛猜用 Playwright 量scrollWidth / clientWidth再逐个改 CSS 做对照实验。坑 3emoji 也会不兼容这个是我批量截图时才发现的。我给操场配了个 滑梯图标。截图出来它渲染成了一个空方框。查了才知道 是 **Emoji 14.02021 年**才新增的老一点的安卓、Windows 都没这个字形。换成了 2017 年的 ️。顺手写了个脚本把这个单元 12 个图标一次性渲染出来肉眼过一遍——这种问题不看图根本发现不了。顺便说埋点我没用百度统计游戏是给孩子玩的但我想知道她到底卡在哪一关不想引第三方统计。做法很土页面每触发一个事件就往t.gif?epass_l3发一个 1×1 像素的 GET。nginx 用empty_gif模块直接回图同时写进自己的日志。时间 | 事件参数 | IP | UA再用一个纯标准库的 Python 脚本出漏斗打开 → 开始 → 第 1 关 → …… → 通关 → 领证书。上线半天就看到了真实数据也第一次知道第 4 关的流失明显比别的高。零成本、不依赖外部服务、数据在自己手里。最后验证别偷懒改完不能靠肉眼看。我用 Playwright 写了端到端脚本自动点完 5 关、走完流程、断言 320/360/390/414 四个宽度都不横向溢出。顺便又一个坑测试脚本不要死等 N 毫秒。第 5 关的完成弹窗正好 1000ms 后出现脚本也等 1000ms——两边撞线跑十次随机失败两次。改成等条件就稳了。这些东西我都沉淀成 skill 了。下一个单元改个配置、跑一次脚本就能出。之前还踩过一次只传了 html、忘了传 audio 目录——这类低级失误靠流程卡住比靠记性靠谱。如果你们也想做这种轻量 H5 自建埋点的东西可以找我聊。