跨端兼容：11年开源站长的无缝点击实践

　　跨端兼容：11年开源站长的无缝点击实践

　　去年10月，我在给「Typecho 1.3-beta」打补丁时发现：安卓 Chrome 129.0.6668.70 在折叠屏模式下触发 submit 事件会漏掉 preventDefault() —— 但仅限于启用了「桌面站点」开关、且 viewport width 设为 device-width 的组合场景。我测了 17 台真机（含 Pixel 7 Pro、小米 MIX Fold 3、华为 Mate X5），只有鸿蒙 4.2 的 WebView 能绕过这 bug，其他全跪。你敢信？一个提交按钮在横屏点一次，竖屏点两次才生效——用户根本不知道自己点了两回。

　　跨端兼容：11年开源站长的无缝点击实践

文章配图，仅供参考

　　我用 GitHub Actions 搭了个持续测试流水线，每 commit 自动跑 Puppeteer + Appium 混合测试：Chrome 112–130、Firefox 115–128、Safari 16.4–17.6、Edge 116–130，还塞进 3 个国产浏览器内核（QQ 浏览器 16.0、UC 15.6、夸克 6.5.5.310）。上周五（2024年6月21日）发现 Safari 17.5 在 iOS 17.5.1 上对 input[type=number] 的 valueAsNumber 返回 NaN 的概率从 0.7% 突增到 23.8%，查日志发现是苹果偷偷改了 WebKit 的 NumberParser 实现——他们连 Release Notes 都没提。这种事我遇到过 4 次，每次都要翻 WebKit SVN 的 1200 行 diff 才定位。

　　新技术真香。

　　去年10月上线的「轻论坛」项目，我赌了一把：弃用 jQuery Migrate，直接上 `IntersectionObserver` + `ResizeObserver` + `AbortController` 做懒加载和响应式切换。结果 Firefox 110 在旧款三星 J7 Prime（Android 7.1.1）上 Observer 不触发，debug 三小时发现是厂商删了 `ResizeObserver` 的 polyfill 接口定义——但居然留着 `IntersectionObserver` 的壳。最后我硬是塞了 47 行 inline script，在 DOMContentLoaded 前动态 patch 全局 API。这活儿别人写了封装库，但我试了 5 个（包括 lozad 和 vanilla-lazyload），没有一个能扛住华为 EMUI 5.1+ 与 Android 7.0 的 combo 毒打。我主观判断：2023 年后的新 API 不是“更稳定”，而是“更透明”——至少你知道它哪天崩、为什么崩、怎么修。

　　失败最狠的一次是今年 3 月。给「Hugo 0.122」主题加 `@container` 查询支持，本地 dev server（Chrome 132）和 Vercel Preview 都完美，一上阿里云 CDN 就挂——原来 CDN WAF 把 `@container` 当 XSS 特征拦截，连 HTTP/2 PUSH 的 `link rel=preload` 都被砍掉。熬了 37 小时，最后靠把 CSS 内联成 base64 + `style` 标签绕过，代价是首屏 HTML 从 83KB 膨胀到 211KB。客户问“为啥不换 Cloudflare”？我说：我租的是 ECS，WAF 是他们绑死的，解绑要走采购流程，周期 14 个工作日——这算不算基础设施级的跨端失控？

　　跨端兼容：11年开源站长的无缝点击实践

　　现在每天凌晨 2:17，我的脚本自动抓取 caniuse.com 的 JSON + MDN Web Docs 的 browser-compat-data，再比对我维护的 142 个插件的真实兼容表（含 WordPress 6.2–6.5、Discuz! X3.5、DokuWiki 2023-04-04a）。光是「拖拽排序」这个交互，我就记录了 8 种 fallback 方案：iOS Safari 16.4 用 touchstart/touchmove、Chrome 124 用 dragstart/drop、旧版 UC 只能退化成上下箭头按钮……你猜哪天起我连 Safari 的「长按弹出菜单」事件都得单独监听？对，就因为 iOS 17.2 改了 contextmenu 的触发阈值——长按 300ms 改成 420ms，但部分游戏手柄模拟触控的设备仍卡在 300ms。这事我没见任何人写过案例，只在我博客的 issue#419 里提过一句。

　　我打算下周试试把 click 事件代理换成 PointerEvent，但不确定是否适配 Surface Pen 的压感识别。

（编辑：站长网）

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