Safari浏览器中user-scalable=no禁用网页缩放失效如何解决

从iOS 10版本开始，Safari出于无障碍访问的设计要求，会默认忽略viewport meta标签中user-scalable=no的配置。你贴出的JS代码末尾存在多余的闭合大括号，有语法错误无法正常运行，且遗漏了部分缩放场景的拦截，因此不会生效。以下是经过验证的可落地方案：

• 第一步：配置完整的viewport meta标签
  不要只单独配置user-scalable=no，把缩放相关的参数全部写全，放在页面head标签内：

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

• 第二步：修复并补全JS事件拦截逻辑
  原有代码缺少touchmove阶段的多指缩放拦截，也没有处理Safari特有的gesture手势事件，且事件监听没有统一关闭passive模式导致preventDefault不生效，修正后的完整代码如下：

  // 拦截多指触摸触发的缩放
  document.addEventListener('touchstart', function(e) {
    if (e.touches.length > 1) e.preventDefault();
  }, { passive: false });
  
  // 拦截多指拖动过程中的缩放
  document.addEventListener('touchmove', function(e) {
    if (e.touches.length > 1) e.preventDefault();
  }, { passive: false });
  
  // 拦截双击触发的缩放
  let lastTouchEnd = 0;
  document.addEventListener('touchend', function(e) {
    const now = Date.now();
    if (now - lastTouchEnd <= 300) e.preventDefault();
    lastTouchEnd = now;
  }, { passive: false });
  
  // 拦截Safari专属的双指缩放手势
  document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
  }, { passive: false });
  

• 第三步：处理表单聚焦自动放大的特殊场景
  Safari在input、select、textarea这类表单元素聚焦时，如果元素的字体大小小于16px，会自动触发放大，给所有表单元素加上如下CSS样式即可规避：

  input, select, textarea {
    font-size: 16px;
  }
  

注意：禁用缩放会影响视障用户的页面访问体验，仅建议在全屏互动H5、小游戏这类强交互场景下使用，普通内容类页面不要做该限制。

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