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

文章配图，仅供参考

　　我嚼着半根冷油条（早上蒸的，现在黏牙），手机电量剩37%，右下角弹出小红点：孩子把我的iPad调成儿童模式，桌面只剩《宝宝巴士》图标。我没管。老陈又甩来一张截图，Chrome DevTools里iOS Safari渲染树卡在flex-shrink=0那行不动，底下标红“computed value: 1”。他补刀：“你这招，连‘招’都算不上，是蒙。”

　　我原以为他顶多质疑兼容性写法，结果他翻出自己去年改版的老站——全站用PostCSS自动加-vendor，硬塞-webkit-和-moz-前缀，说“这才是正解”。我当时就一句话：“你那个站，安卓端字体撑开按钮，iOS上缩成蚊子腿，你敢说没重写三遍CSS？”他顿了五秒，回：“……是重写了，但那是布局问题，不是渲染差异。”

　　旁边小周——就是做外贸模板站那个，群里人称“CSS缝合怪”——插进来发了个[捂脸]表情包，然后秒撤回。我顺手点了撤回提示框右上角叉号，手指滑过屏幕时蹭到音量键，“咔哒”一声，手机突然外放起抖音神曲。老陈立刻说：“你看，连音量键触发都不同，你还敢讲‘一招’？”

　　我认输的那个点，是“viewport单位适配”。他举例子：vw在iOS微信里有3%偏差，安卓各厂商WebView差得更散，连小米浏览器自己家app里测都不一致。“你说‘一招’，总得扛住这个吧？”我含糊说：“这个……确实得靠兜底，比如 fallback为rem。”说完我就后悔了——干嘛用“兜底”这个词？听着就像认怂。但他立马接：“那不就是两招了？还‘一招’？”

　　可另一头我死不松口：他说“优胜劣汰是伪命题”，我直接拍桌子（其实拍的是泡面箱，哐当响）。我说：“淘汰什么？淘汰不用viewport的？淘汰没加user-scalable=no的？淘汰不处理iOS input光标跳动的？你看看近两个月我搭的六个站，三个用rem崩了安卓折叠屏，两个用flex-wrap在iOS17.4里错行，剩下一个纯用CSS Grid+clamp()的——跑得最稳。”窗外车按喇叭，连按三声，像在给我打节拍。

　　老陈忽然说：“你那Grid站，字体加载延迟，iOS白屏200ms，算不算缺陷？”我没回。他接着说：“而且，你根本没测华为鸿蒙4.2自带浏览器。”我笑了：“鸿蒙？我连荣耀V30都借不到真机，你测了？测了几个机型？”他沉默。小周又冒泡：“我测过，鸿蒙里有个bug，display: contents在表格里直接失灵……”话没说完，老陈发了个[强]，小周立刻撤回，估计被踢出群了——群里规矩，不能提具体厂商bug名。

　　说到这儿我忽然想起来，上个月备案新站，材料刚交上去，隔壁李哥就私聊问我：“你这H5页底部留白为啥iOS比安卓多12px？”我回：“因为苹果偷偷加了safe-area-inset-bottom，但安卓没这玩意儿。”他回：“那咋不统一裁掉？”我答：“裁了，iOS上内容被刘海盖一半。”他叹气：“站长现在，连手机壳厚度都得管。”——我盯着这句看了十秒，筷子夹的油条掉进泡面汤里，浮着一层黄晕。

　　老陈最后发来一句：“优胜劣汰？淘汰的是人，不是代码。”我没理。他以为我在思考，其实我在翻相册找那个Grid站的Lighthouse报告图——照片存手机里，但昨天孩子划拉屏幕时点了“清理重复照片”，现在找不到了。你懂吧，有时候不是不想争，是连证据都被删得只剩截图记忆。

　　反正我明早先把那张Grid站安卓/iOS并排对比图截出来，带时间水印。也可能他说的那部分是对的——比如鸿蒙那个bug，我真没测。但我认输只限viewport，其他地方，一个像素都不让。

（编辑：站长网）

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