如何在iOS 15 Safari中禁用双击缩放功能？

针对游戏虚拟键盘快速点击触发双击缩放的情况，以下几个方案可以尝试：

1. 全局拦截双击触摸事件 #

通过监听全局touchstart事件，判断连续两次点击的时间差和位置偏移，符合双击条件时阻止默认行为：

let lastTapTime = 0;
let lastTapX = 0;
let lastTapY = 0;

document.addEventListener('touchstart', function(e) {
  const currentTime = Date.now();
  const { clientX: tapX, clientY: tapY } = e.touches[0];
  const timeDiff = currentTime - lastTapTime;
  const distanceX = Math.abs(tapX - lastTapX);
  const distanceY = Math.abs(tapY - lastTapY);

  // 判定双击：时间差<300ms，位置偏移<10px
  if (timeDiff < 300 && distanceX < 10 && distanceY < 10) {
    e.preventDefault();
  }

  lastTapTime = currentTime;
  lastTapX = tapX;
  lastTapY = tapY;
}, { passive: false });

注意：必须设置passive: false，否则iOS Safari中无法调用preventDefault()阻止默认行为。

2. 仅针对虚拟按键拦截双击 #

如果全局拦截会影响其他页面交互，可单独给每个游戏按键添加事件处理，只阻止同一按键的连续点击触发缩放：

const gameKeys = document.querySelectorAll('.your-key-class'); // 替换为你的按键类名
const lastKeyTapRecords = {};

gameKeys.forEach(key => {
  key.addEventListener('touchstart', function(e) {
    const keyIdentifier = this.dataset.keyId || this.id;
    const currentTime = Date.now();

    if (lastKeyTapRecords[keyIdentifier] && currentTime - lastKeyTapRecords[keyIdentifier] < 300) {
      e.preventDefault();
    }

    lastKeyTapRecords[keyIdentifier] = currentTime;
  }, { passive: false });
});

这种方式更精准，不会干扰页面其他元素的正常触摸交互。

3. 完善viewport元标签配置 #

在原有viewport基础上补充缩放范围限制，强化禁止缩放的规则：

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

虽然user-scalable=no理论上禁止缩放，但明确minimum-scale和maximum-scale可以避免iOS Safari的某些兼容问题。

额外注意事项 #

• 测试需在真实iOS设备上进行，模拟器的触摸行为可能与真机存在差异；
• 若按键元素有点击事件，确保触摸事件的处理不会影响原有功能逻辑。

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