跨端兼容：19年物联网工程师的无缝点击实践

　　两个月前那项目，我原以为跨端兼容就是改改CSS，结果被甲方爸爸的点击事件逼疯了——他们要求所有设备上的按钮点击区域必须“无缝”，不能有半像素偏移，否则就扣尾款。这要求本身不复杂，但架不住他们设备列表里混着十年前的安卓平板和最新款折叠屏，我改到第三版时，服务器风扇嗡嗡响，显示器上贴的“今日必改”便签被外卖盒压得卷了边。

　　先说最坑的：安卓4.4的WebView。这破玩意儿对点击事件的响应区域计算和现代浏览器完全两码事，我原以为用`touch-action: manipulation`能搞定，结果测试时发现，按钮边缘1px的位置点下去没反应——甲方当场拍桌子：“这算哪门子无缝？”我翻遍MDN和Stack Overflow，最后发现得用`-webkit-tap-highlight-color: transparent`配合`pointer-events: auto`，还得给按钮外层包个`div`手动扩大点击区域。那天改到凌晨两点，键盘上掉了两个键帽，是Ctrl和Alt，估计是敲得太狠。

　　可这还没完。iOS的Safari更绝——折叠屏展开后，视口宽度变了，但`window.innerWidth`的值没及时更新，导致点击区域的计算基于旧尺寸，用户点下去发现按钮“跑”了。我原以为用`resize`事件监听就能解决，结果测试时发现，折叠屏展开的动画过程中，`resize`会触发十几次，每次触发都重新计算布局，页面卡得像PPT。最后没办法，加了个防抖函数，延迟200ms再执行计算，这才勉强过关。那周我外卖盒堆在桌角，发霉了都没顾上扔。

　　但最让我崩溃的是Windows的IE11——这破浏览器连`pointer-events`都不支持，点击区域得用绝对定位的`div`盖在按钮上，还得手动处理`z-index`防止遮挡其他元素。我写了个兼容函数，结果测试时发现，IE11的`getBoundingClientRect()`返回的坐标和现代浏览器差了2px，导致点击区域偏移。我查了半天，发现是IE11的渲染引擎有个历史遗留bug，对`transform`属性的处理和其他浏览器不一样。最后只能针对IE11单独写一套计算逻辑，用`offsetLeft`和`offsetTop`替代`getBoundingClientRect()`。那天窗外下了一下午的雨，路由器指示灯闪得人心烦，我改完代码一测试，IE11居然能点了——可甲方又说，按钮的hover效果在IE11上没显示，得再加一套CSS。

文章配图，仅供参考

　　再说回“无缝点击”——这破需求看似简单，实则是个大坑。我原以为只要统一点击区域的计算方式就能搞定，结果发现不同设备、不同浏览器的渲染差异大得离谱。比如安卓的Chrome和Firefox，对`box-sizing: border-box`的处理就不一样，导致按钮的实际宽度差了1px；iOS的Safari在横屏模式下，视口高度的计算会忽略状态栏，导致点击区域偏移。这些细节单个看都不致命，但凑在一起就能让你怀疑人生。我改到⭐️⭐️⭐️⭐️甚至写了个自动化测试脚本，用Puppeteer模拟各种设备和浏览器，自动检测点击区域的偏移量——可甲方又说“测试结果不够直观”，让我“录个视频”。

　　不过话说回来，这项目也让我明白了个道理：跨端兼容这事儿，优胜劣汰太明显了。那些支持现代标准的设备和浏览器，改起来轻松；而那些老古董，比如IE11、安卓4.4的WebView，改起来就是折磨。我甚至跟甲方提过：“要不咱们放弃支持IE11？”结果他们说“用户里还有用XP的”。我当场就懵了——XP都停服多少年了，谁还在用啊？可甲方说“数据说话”，我查了下日志，发现居然真有0.3%的流量来自IE11。行吧，为了这0.3%，我得继续给IE11写兼容代码。

　　现在项目总算上线了，甲方没再挑刺，但我知道，这“无缝点击”的背后，是无数个熬夜改代码的夜晚，是键盘上掉落的键帽，是外卖盒堆成的山，是窗外下了一下午的雨，是路由器指示灯闪得人心烦。我甚至怀疑，这项目要是再拖一个月，我该去买新的键盘和显示器了——旧的估计撑不住。

　　下一步打算？我打算把兼容代码抽离出来，做个开源库，省得下次再遇到这种破需求还得从头写。可我又有点犹豫——这库要是没人用，岂不是白费劲？不过话说回来，就算没人用，至少我下次能直接复制粘贴，省点时间。至于甲方说的“后续优化”，爱咋咋地吧，我已经尽力了——再改下去，我该改行去修服务器了。

（编辑：草根网）

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