iOS 13.3下viewport的user-scalable=no失效，无法禁用网页pinch zoom

我太懂你这种挫败感了——之前靠viewport标签就能搞定的禁用捏合缩放，到iOS 13.3之后突然不管用了，连之前稳定运行的旧项目也翻车了。这其实是苹果在iOS 13系列里调整了网页缩放的权限逻辑，单纯依赖user-scalable=no或者0已经不顶用了，得结合JS和CSS一起处理才行。

给你一套实测有效的组合方案：

1. 保留基础viewport标签（不能省） #

先把你原来的viewport标签保留，它是基础限制的前提：

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

虽然它单独作用已经失效，但配合下面的方法能起到辅助限制的作用。

2. 用JS拦截触摸事件（核心解决iOS的绕过逻辑） #

iOS现在允许用户通过一些交互绕过viewport的限制，所以我们需要手动拦截双指缩放和双击缩放的事件：

// 拦截双指触摸缩放
document.addEventListener('touchmove', function(event) {
  // 当触摸点超过1个时，阻止默认缩放行为
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, { passive: false }); // 这里必须设为false，否则iOS下preventDefault不生效

// 拦截双击缩放
let lastTouchEndTime = 0;
document.addEventListener('touchend', function(event) {
  const currentTime = Date.now();
  // 两次触摸结束间隔小于300ms判定为双击，阻止默认缩放
  if (currentTime - lastTouchEndTime <= 300) {
    event.preventDefault();
  }
  lastTouchEndTime = currentTime;
}, false);

重点提醒：{ passive: false }是关键，因为iOS Safari默认把touchmove事件设为passive（不允许阻止默认行为），所以必须显式关闭这个设置才能让preventDefault生效。

3. 补充CSS的touch-action属性（强化限制） #

给页面根元素加上touch-action属性，明确告诉浏览器只允许平移操作，禁止缩放：

html, body {
  touch-action: pan-x pan-y;
}

这个CSS属性是现代浏览器的标准特性，能直接限制触摸行为，和JS方案配合起来更稳妥。

额外注意事项 #

• 苹果调整这个逻辑是为了无障碍访问，所以如果不是必须禁用缩放的场景（比如原生风格的WebApp），建议不要强制禁用，保留用户缩放的权利。
• 如果你的页面里有需要缩放的元素（比如画布、地图组件），不要全局禁用，只给需要限制的容器单独加上述JS和CSS，避免影响其他功能。

内容的提问来源于stack exchange，提问作者adrian li