一招终结iOS/Android H5渲染差异

　　跟老板拍桌子那天，我左手边咖啡凉了，右手边 PR 评论框光标还在闪——就差勾选那个“squash and merge”，结果前端突然弹窗说“iOS 上按钮被裁掉十七像素”，我直接把键盘推远了十五厘米。

　　去年元旦，我在西安南站改完最后一行 CSS，用 iPhone 14 和小米 13 同时扫码打开 H5，一模一样的 viewport，一模一样的 flex 布局，安卓上首屏全在视口里，iOS 上 footer 死死卡在底部往上顶了三毫米。不是错觉，是真·三毫米。我拿尺子比过手机屏幕，不是单位换算误差，是 Safari 渲染器自己加的 padding，它不声不响给 body 底部塞了层看不见的绒布垫。

　　一招终结？就是强制所有页面加 body { margin: 0; padding: 0; min-height: 100vh; } ，然后在 JS 里补一句 document.body.style.height = '100vh' ——别笑，这个我敢打包票，你测三百七十二次，只要不碰 iOS 的 -webkit-overflow-scrolling: touch 那套玄学，它就不飘。不是最优解，是优胜劣汰：活下来的页面，都靠这句硬刚掉渲染差异；死掉的，早就在测试周第二轮就被 product 拉进墓碑列表了。

　　我原以为得动 viewport meta，结果 PM 在会议室白板上画了个箭头指着“100vh”，问我：“能不能让安卓也往下压一点？”我说不能，她点头说好，转身就给前端发了钉钉消息：“请同步适配 iOS 视口逻辑”。没人提 Android，也没人问为啥不统一用 vh。就这就完了。那天下着雨，桌面那个没关的录屏还在跑，右下角时间显示下午三点零七分，录的是上周五的 bug 复现会议，但我根本没回看——因为第二天晨会前，后端把 CDN 账单截图甩群里了，说“静态资源域名多绑了一个子域，月增十八块钱”，我们仨盯着看了四分钟，谁也没说话。

　　Lighthouse 跑分截图发到群里没人回。不是没人看，是那天大家刚收到绩效面谈时间表，PM 把自己电脑调成勿扰模式，连 Slack 红点都关了。我倒了杯水回来，看见前端正用 AirPods 听技术播客，音量开得太大，他摘下来时耳道还嗡嗡响。我坐回去，发现 Chrome DevTools 里 toggle device toolbar 切换 Nexus 5X 和 iPhone SE，两个屏幕高度显示都是 667px，可实际渲染出来的滚动条位置偏移了整整一个 input 框的高度——这事儿我说不准，但我知道 Safari 有个隐藏的 scroll anchor bias，安卓浏览器根本没这玩意儿。

　　最搞笑是 QA 提 Bug 的方式：Android 截图上写“按钮完整可见”，iOS 截图上打了个红圈，圈住按钮下半截阴影边缘——他们默认“阴影模糊度”是渲染一致性的判断依据，连我都没拦。后来发现安卓 Webview 把 box-shadow 渲染成两层渐变，Safari 只渲一层硬边。这事没报 Jira，因为前端说“设计师验收过，算 Acceptance Criteria”，我当场点了三次刷新，第三次才意识到他用的是 Safari Technology Preview……那版本比正式版还激进，连 aspect-ratio 都支持，但对 min-height: 100vh 有额外缩放补偿。所以现在我们 CI 流水线里跑 iOS 真机之前，先跑一个 check-height 的 shell 脚本，校验 document.body.offsetHeight 是否等于 window.innerHeight，误差超过三像素就 fail。不是为了精度，是为了让 Jenkins 报错的时候，能明确打出“iOS body 高度漂移”这八个字，而不是笼统的 “viewport not stable”。

　　对面工程师换了一根 USB-C 转 Lightning 的充电线，灰色的，带编织纹。他换线的时候说了句“这根不掉帧”，我没接话，因为我知道他说的“掉帧”指的是 XCTest 启动 WebDriverAgent 时 waitForExist 的超时率。这事跟渲染差异无关，但他觉得有关。有时候我想，也许我们早该认命：H5 就不是给双端一致设计的，它是先喂 Safari，再求安卓 Webview 接住漏下来的渣。所谓“终结”，不过是把漏斗换个更直的形状——漏得少点，不漏得那么理直气壮。

　　上周五下班前，我把那段 document.body.style.height = '100vh' 剪出来，单独封装成 npm 包，取名叫 @h5-stable/force-vh，README 第一行写：“不推荐使用。只供紧急救火和简历镀金。” 发布后没五分钟，内部 NPM registry 页面跳出个提示：“检测到未关联 Jira ticket，是否跳转创建？”我点了取消。包名下面有个小字写着“Last published: 2023-01-01”。那是我元旦当天打包的初版——日期没改，就挂着，像块墓碑。

文章配图，仅供参考

　　现在我每次进项目，第一件事是 grep 全局有没有 height: 100%，有就替换成 min-height: 100vh；第二件事是删掉所有 { box-sizing: border-box } 之外的全局 reset；第三件事……算了，第三件事等真机连上再说。你问下一步？我把这段 logic 塞进了 Cypress 的 before:run hook，正在试能不能监听 window.resize 事件，抓到 Safari 那瞬间的 height 抖动——不过暂时放弃，因为今天下午三点要陪产品核对灰度名单，她们说“用户量级不大，可以赌一把”。我就赌。反正赌赢了没人记得，赌输了……就再元旦重来一遍。

（编辑：站长网）

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