如何在Safari中禁用默认捏合行为并自定义捏合处理方法？

嘿，我之前在做带地图的移动端项目时也踩过这个坑！苹果确实在新版Safari里调整了对缩放限制的规则，原来的meta标签和简单的touchstart阻止已经不管用了，给你分享两个问题的解决办法：

首先得明确：iOS Safari现在对user-scalable=no的支持很有限，尤其是当页面内容需要适配不同屏幕时，这个属性经常会被忽略。而且只在touchstart里调用preventDefault()也没用，因为捏合是多触点连续触发的行为，得针对手势事件或者完整的触摸流程来处理。

这里有两个可行的方案：

• 方案1：监听Safari专属手势事件
  Safari原生支持gesturestart和gesturechange事件，专门用来处理捏合、旋转这类手势。给目标div绑定这两个事件，直接阻止默认行为即可：

const mapContainer = document.querySelector('#your-map-div');

// 阻止默认捏合手势触发
mapContainer.addEventListener('gesturestart', (e) => {
  e.preventDefault();
}, { passive: false });

mapContainer.addEventListener('gesturechange', (e) => {
  e.preventDefault();
}, { passive: false });

注意一定要加上{ passive: false }，否则现代浏览器会默认把这类事件设为passive模式，preventDefault()会直接失效。

• 方案2：通过触摸点数量判断并阻止
  如果需要兼顾更多浏览器兼容性，可以监听触摸事件，通过触摸点数量判断是否是捏合操作，再阻止默认行为：

const mapContainer = document.querySelector('#your-map-div');
let touchCount = 0;

mapContainer.addEventListener('touchstart', (e) => {
  touchCount = e.touches.length;
}, { passive: false });

mapContainer.addEventListener('touchmove', (e) => {
  // 检测到两个及以上触摸点（捏合行为），阻止默认缩放
  if (e.touches.length >= 2) {
    e.preventDefault();
  }
}, { passive: false });

mapContainer.addEventListener('touchend', () => {
  touchCount = 0;
});

这个方法通用性更强，但要注意：如果你的地图本身需要自定义捏合逻辑，这个方法会完全阻止所有多触点行为，需要结合自定义处理一起使用。

如果要自己实现捏合缩放逻辑，核心是跟踪两个触摸点的距离变化，计算缩放比例后应用到目标元素上。这里给你一个基础的实现示例：

const mapContainer = document.querySelector('#your-map-div');
let initialDistance = 0;
let initialScale = 1;

// 计算两个触摸点之间的直线距离
function getTouchDistance(touches) {
  const xDiff = touches[0].clientX - touches[1].clientX;
  const yDiff = touches[0].clientY - touches[1].clientY;
  return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
}

mapContainer.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    // 记录初始触摸距离和元素当前的缩放比例
    initialDistance = getTouchDistance(e.touches);
    initialScale = parseFloat(window.getComputedStyle(mapContainer).transform.split('(')[1]?.split(',')[0]) || 1;
    e.preventDefault(); // 阻止默认行为避免冲突
  }
}, { passive: false });

mapContainer.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    const currentDistance = getTouchDistance(e.touches);
    // 计算当前缩放比例
    const scale = initialScale * (currentDistance / initialDistance);
    // 应用缩放（可根据需求添加缩放范围限制）
    mapContainer.style.transform = `scale(${scale})`;
    e.preventDefault();
  }
}, { passive: false });

额外提醒： #

如果你用的是第三方地图库（比如Google Maps、Apple Maps），建议先查看官方文档的手势配置项——比如Google Maps可以通过gestureHandling: 'none'直接禁用默认缩放手势，这种官方方案比自己写JS更稳定可靠。

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