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

　　一三年那会儿，我蹲在中关村海龙三层那个没窗的隔间里改CSS，空调外机轰隆响，风扇在头顶吱呀转——现在想想，可能就因为那风扇太吵，人容易犯倔。老张坐我斜后方，叼着烟敲键盘，烟灰掉进机械键盘缝隙里，我俩谁也没管。他刚把一段JS塞进iframe里骗过iOS Safari的渲染引擎，我盯着屏幕右下角那个像素级错位的border-radius发呆：Android原生WebView圆角是锯齿的，iOS上又圆得过分，像被PS羽化过三次。我们最后靠写两套样式+UA sniff硬扛过去，还跟产品说“这叫平台特性”。

　　一七年换到新公司，会议室装了投影仪，但第一次演示还是翻车了。小王举着iPhone 10和小米8同时划页面，安卓那边文字渲染发虚，iOS上阴影却重得像盖了层灰玻璃。我们连夜把所有rem单位换成vw，又补了一堆-webkit-前缀，连box-shadow都拆成两行写。当时信誓旦旦：“只要压住Safari 11和Chrome 62的解析差异，八成能稳。”结果上线第三天，某省电信运营商劫持了CDN，偷偷往head里塞了个压缩脚本，把我们写的@media screen and (-webkit-min-device-pixel-ratio: 2)整个干掉了——那个@media后面跟着的47行代码，白写了。我原以为设备像素比是铁律，结果发现它比小区物业通知还不可靠。

　　二二年，我带的组里新来的小姑娘，用Vite搭了个Demo，三行CSS解决圆角统一问题：@supports (clip-path: inset(0)) { … }。我凑过去看，她顺手把iPhone和华为Mate50并排放桌上——两个屏幕里那个按钮，圆角、阴影、字体渲染，几乎一样。我愣了几秒，转身去翻自己电脑里一三年建的“h5兼容性备忘录”文件夹，里面还有当年打印出来的iOS WebView版本对应表，纸边都卷了。老张早不干前端了，去年听说在杭州搞宠物殡葬，微信头像是一只闭眼的金毛。我删掉备忘录里“iOS 10.3以下需禁用will-change”的备注，删得有点慢。

　　其实走错那步，是一九年。那时候React Native还没彻底凉透，我们接了个银行项目，非要坚持“H5当壳、逻辑下沉”，把所有样式计算扔进JS层做运行时适配。结果安卓低端机卡顿到连loading动画都抽帧，iOS上又因JSCore缓存策略导致按钮点击延迟。技术负责人拍桌子说“用户体验要统一”，我就真信了，带着三个人熬了四个月写样式diff引擎——比浏览器还懂盒模型的那种。后来发现，不是引擎不好，是根本没人需要它。用户不关心border-radius差0.3px，他们只在意转账失败时有没有弹出“请检查网络”的提示。那套引擎，现在还躺在GitLab冷库里，README第一行写着“v1.2.0（已弃用）”，没删，也没人动过。

文章配图，仅供参考

　　昨天下午茶时间，我问那个小姑娘：“你们学校教不教UA识别？”她摇头，说实习第一天就被导师拦住：“别碰navigator.userAgent，它下周可能就变null。”我笑了下，想起一三年老张吐着烟圈说“苹果迟早跪”，结果跪的是我们这群还在手写hack的人。桌上那台显示器牌子……记不清了，戴尔？联想？反正屏保是Windows默认的蓝色渐变，动不动就蓝屏，重启三次才能进系统。隔壁工位老李，后来去做了跨境电商独立站，去年发朋友圈晒自己买的深圳小产权房，照片里晾衣绳上挂着两件婴儿衣，底下配文“终于不用改兼容了”。我没点赞。

　　现在这套我也拿不准还能干几年。上周测试环境跑了遍WPT，发现Safari 17.5开始把document.fontSmoothing从CSSOM里砍掉了，而Android 14的WebView悄悄加了新的文本抗锯齿标记，文档都没更新。工程师群里有人发了个GIF：同一个HTML文件，在Chrome最新版、Edge最新版、Safari最新版里，三个input框的光标高度差分别是1px、0px、-2px。没人接话。我关掉网页，看见自己Mac顶栏右上角的时间显示“16:27”，突然记起一七年那个劫持CDN的省电信，他们运维电话我存过，号码后四位是“7021”，现在打过去，语音提示“您拨打的用户已停机”。

　　所以现在我不再追着“终结差异”跑。改用postcss-plugin-viewport-fit，加一行，剩下的，随它去。真要较劲，不如花十分钟给设计师讲清楚line-height和font-size的关系——毕竟当年在中关村，老张那根烟抽完，烟灰缸底的灰堆得比我们的兼容方案还厚。

（编辑：均轻资讯网）

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