我太懂这个痛点了！苹果明明在官方文档里标注了user-scalable=no可以禁用视口缩放，但从iOS 10开始，Safari就不再严格遵守这个规则了——尤其是做网页游戏或者需要紧凑交互的场景，默认的捏合缩放完全会打乱自定义交互逻辑，实在闹心。

下面分享几个经过真机验证的可行方案：

方案1：用JavaScript直接拦截捏合事件 #

核心思路是监听触摸事件，当检测到双指操作时，阻止浏览器的默认缩放行为，同时触发你的自定义交互逻辑：

// 记录触摸开始时的手指数量
let touchStartFingerCount = 0;

// 监听触摸开始
document.addEventListener('touchstart', (e) => {
  touchStartFingerCount = e.touches.length;
}, { passive: false });

// 监听触摸移动，拦截双指操作
document.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    // 阻止浏览器默认的缩放行为
    e.preventDefault();
    // 这里调用你的自定义捏合交互函数
    handleMyCustomPinch(e);
  }
}, { passive: false });

// 示例：自定义捏合逻辑
function handleMyCustomPinch(event) {
  const [touch1, touch2] = event.touches;
  // 计算双指距离
  const pinchDistance = Math.hypot(
    touch2.clientX - touch1.clientX,
    touch2.clientY - touch1.clientY
  );
  // 这里写你的业务逻辑，比如调整游戏道具大小、触发技能等
  console.log('当前捏合距离:', pinchDistance);
}

⚠️ 重点提醒：一定要设置{ passive: false }，不然Safari会因为触摸事件默认是被动模式，导致preventDefault()失效。

方案2：视口设置+CSS触摸动作优化 #

先保留基础的视口元标签，再用CSS限制浏览器的默认触摸行为：

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

然后给全局元素添加CSS规则：

html, body {
  touch-action: manipulation;
}

touch-action: manipulation会告诉浏览器：只允许触发平移和点击操作，禁用默认的缩放、双击缩放行为，能很好地和JS逻辑配合，减少交互冲突。

额外小贴士 #

• 别忘了拦截双击缩放！Safari的双击缩放也会干扰自定义交互，加上这段代码即可：

document.addEventListener('dblclick', (e) => {
  e.preventDefault();
});

• 测试一定要用真机！模拟器的触摸事件模拟和真机差异很大，很多问题只有真机才会暴露。

内容的提问来源于stack exchange，提问作者Marvin Danig