如何阻止Safari移动浏览器在滚动时触发捏合缩放？

我太懂这个痛点了——user-scalable=no在Chrome和Firefox里用着顺风顺水，但iOS Safari总能给你整出点特殊情况，尤其是滚动过程中的捏合缩放，确实容易绕过常规设置。下面是我实战过的组合方案，应该能彻底堵上这个漏洞：

1. 强化Viewport配置 #

先把viewport参数补全，有时候Safari对单一的user-scalable=no支持不够彻底，加上明确的缩放范围限制会更稳妥：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

这个配置直接锁定了缩放区间，从初始1.0开始，不允许任何放大或缩小操作，配合user-scalable=no能覆盖大部分基础场景。

2. 用CSS touch-action禁用冗余触摸行为 #

现代浏览器（包括Safari）都支持touch-action属性，它能直接告诉浏览器哪些触摸行为是允许的。我们设置为manipulation，只保留滚动和点击操作，自动禁用双击缩放和捏合缩放：

html, body {
  touch-action: manipulation;
}

如果你的页面有自定义滚动容器（比如带overflow: scroll的元素），记得给这些容器也加上这个属性，避免局部区域出现缩放漏洞。

3. 监听触摸事件，拦截多触点操作 #

滚动过程中的捏合本质是多触点触发的行为，我们可以通过JavaScript监听触摸事件，当检测到2个及以上触点时，直接阻止默认行为：

let activeTouches = 0;

// 记录初始触摸触点数量
document.addEventListener('touchstart', (e) => {
  activeTouches = e.touches.length;
});

// 拦截多触点的触摸移动行为
document.addEventListener('touchmove', (e) => {
  if (e.touches.length >= 2) {
    e.preventDefault();
  }
}, { passive: false }); // 必须设置passive为false，否则preventDefault会失效

// 触摸结束后重置计数
document.addEventListener('touchend', () => {
  activeTouches = 0;
});

这里要重点注意passive: false的设置——默认情况下，浏览器为了滚动性能会把touchmove事件设为passive，这时候preventDefault会失效，所以必须显式关闭这个选项。

额外提醒 #

上面的方法不会影响单指滚动和正常点击，但如果你页面里有需要多触点的自定义交互（比如手势操作），记得给对应的元素添加例外，比如在特定元素上取消事件监听或者允许默认行为。

内容的提问来源于stack exchange，提问作者Ivan Cherevko