一招搞定iOS与Android H5渲染差异

　　我原以为是安卓端被降权了。查一下收录——先登百度站长，点“索引量”，刷新三次；再切移动适配工具，看匹配状态；最后去搜“site:xxx.com intitle:优惠券”，结果首页没几个，第三页倒冒出俩快照，还是三个月前的。当时窗外正下着雨，雨刮器卡在中间位置，吱呀、吱呀、吱呀。

　　群里老张发了个“????”表情包，下面跟三个人问“是不是全站HTTPS没配好”。我没回。手边烟灰缸堆了七根烟头，第三根还燃着，青烟歪着飘向空调出风口。我盯着那截红点，突然想起去年改版时把flex-direction从row改成column，就为了兼容iOS 15.4那个该死的负margin渲染bug——结果安卓Chrome一升级，整个商品卡片塌成一条线，连图都错位了。

　　所以不是安卓不行，是iOS太行。iOS Safari把CSS transform写成translateZ(0)会触发硬件加速，但Android Webview压根不理这句，它只认translate3d(0,0,0)；可你加了translate3d，iOS又因为GPU内存回收机制，滑动三下就白屏——上周五下午三点四十七分，小王在测试机上录屏发来，画面刚滚到第五个Banner，“啪”一下全灰掉，像被拔了电源。我敢打包票，就是那行-webkit-transform: translateZ(0); 搞的鬼。但到底是哪次更新的事我说不准，可能是iOS 16.6，也可能是安卓14.2那波内核切包。反正现在页面一打开，iOS上字锐利得能割手，安卓上灰蒙蒙像隔了层磨砂玻璃。

　　客户李总当天晚上九点打电话：“王哥，你们后台监控有没有报错？我们安卓用户投诉字体糊，iOS说按钮点不动。”他说话时背景里有电钻声，很近，像是隔壁在敲承重墙。我捏着手机靠在阳台栏杆上，晾衣绳上三件衬衫还滴着水，其中一件是我老婆昨天穿去开会的米白衬衫，袖口卷到手肘，忘了收。我没说“这不是前端问题”，也没说“您让安卓用户清缓存”，就嗯嗯两声，挂了电话往嘴里塞了颗薄荷糖，甜得发苦。

　　后来查日志发现，六月六号凌晨两点零三分，百度蜘蛛爬过三百七十二个词页，其中二百零九个返回200但content-length为0——对，空壳页面。不是跳转，不是404，是服务器真吐出了空白HTML。而那天我们什么都没发，连CDN缓存都没碰。运维小陈在凌晨三点发微信说“nginx配置没问题”，然后补一句“我刚在吃泡面，面汤洒键盘上了”。

　　优胜劣汰。这话我十年前做站群时听人说过。当时用Python脚本轮询生成三百个站，每个站标题关键词不同，描述模板微调三处，链接锚文本轮换五种写法。结果活下来的只有十七个——不是因为关键词密度高，是因为其中十二个用了固定宽度+viewport强制缩放（那时候还没“响应式”这个词），剩下五个是用table套出来的自适应布局，意外扛住了UC浏览器那次解析引擎暴毙。现在回头看，根本不是算法聪明，是某些写法天然卡在兼容性断层上，活下来的纯属运气好。

　　我以前信CSS reset，后来信normalize.css，再后来信postcss-preset-env自动补全。去年开始信BFC，今年信Flexbox gap属性兼容性检测表。信来信去，信到第六次改稿，甲方说“能不能别动布局，就改个颜色”。我当场就把所有transform都删了，改用padding-top模拟垂直居中。第二天安卓用户说“终于不闪了”，iOS用户说“怎么变慢了”。我说：“慢总比崩强。”

文章配图，仅供参考

　　其实早该想到。六月三号那天上午，安卓端H5的LCP指标稳定在1.7秒，iOS端是0.8秒；六月七号，iOS拉到1.9秒，安卓降到1.3秒。数据曲线就像两个人在跷跷板上较劲，一头起来，另一头必然沉下去。没有“同时完美”，只有“轮流体面”。所谓“一招搞定”，不过是把所有设备当成一个整体来淘汰：哪个平台跑不通，就让它失效；哪个用户访问失败，就让它离场。不是调和，是裁剪。把那些依赖-webkit-前缀的、用transformZ赌GPU加速的、拿flex-wrap: wrap-reverse搞视觉陷阱的页面，全扔进回收站。

　　我桌上还有份没签的协议，甲方要我们保证“全机型适配”。合同第十三条写着“包括但不限于iPhone 12至15系列及安卓各品牌主流机型”。我划掉那条，手写的备注：“仅保障iOS与Android共性CSS能力，差异部分按平台默认行为执行。”底下甲方签字人是我自己。

　　明天先把手上那批页面删一半试试。

（编辑：站长网）

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