iOS端禁用缩放功能求助：双击等缩放操作仍生效

1. 优化Viewport Meta标签配置 #

仅设置user-scalable=no在新版iOS Safari中容易失效，需搭配完整参数锁定缩放：

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

• 必须同时指定initial-scale、maximum-scale、minimum-scale为1.0，与user-scalable=no形成配合
• viewport-fit=cover用于适配刘海屏设备，不影响缩放控制逻辑

2. 通过JS拦截缩放触发事件 #

iOS Safari会绕过meta标签触发双击/双指缩放，需监听触摸事件阻止默认行为：

// 拦截双击缩放
let lastTouchEnd = 0;
document.addEventListener('touchend', function(e) {
  const now = Date.now();
  if (now - lastTouchEnd <= 300) {
    e.preventDefault();
  }
  lastTouchEnd = now;
}, false);

// 拦截双指缩放手势
document.addEventListener('gesturestart', function(e) {
  e.preventDefault();
}, false);

// 拦截多手指触摸移动的缩放行为
document.addEventListener('touchmove', function(e) {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, { passive: false });

• 通过触摸间隔判断双击行为，直接阻止默认动作
• gesturestart事件可直接拦截双指缩放的触发
• passive: false确保preventDefault能生效，部分浏览器默认会忽略该配置

3. 禁用表单元素触发的缩放 #

iOS Safari会对字体小于16px的表单元素自动缩放，需强制设置字体大小：

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

4. 验证注意事项 #

• 测试前清除浏览器缓存，避免旧配置干扰
• 使用真实iOS设备测试，模拟器可能存在行为偏差
• 覆盖测试页面空白区、表单元素、图片等不同区域的缩放触发场景

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