为了去掉 300ms 延迟给按钮加了 touch-action: manipulation,iOS 15 上双击还是把页面放大 1.3 倍,第二次点按钮点不中。日志里能对上时间点,这种反而好排。

父级容器写了 touch-action: auto,子元素的值被更高层的滚动行为覆盖。双击缩放由浏览器手势决定,也不完全看单个元素的声明。这一点先确认清楚,后面就不用反复试。

html, body { touch-action: manipulation; }
.btn { touch-action: manipulation; }
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>

这次卡住的地方就在「touch-action 双击缩放」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

报错里带路径的,先去看那个路径在不在、权限对不对。同一份配置存在多处的,先确认改的是被加载的那一份。

处理上按这个顺序:确认从 body 到按钮这条链上没有 auto 覆盖;viewport 里加 maximum-scale=1 只对部分内核有效;需要完全禁用就设 touch-action 的 none 但要自己实现滚动;真机上双击和双指捏合各试一次。

结果对不对很好判断,双击按钮不再放大页面,连续快速点击两次都能触发点击事件。

作者 9823189