移动端WebGL地图应用：禁用原生捏合缩放并手动实现缩放

一、禁用iOS Safari原生捏合缩放 #

要彻底阻止iOS Safari的原生捏合缩放，需要结合视口配置和触摸事件拦截：

1. 配置正确的viewport meta标签：

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

2. 监听触摸事件，仅在双指操作时阻止默认行为（避免影响单指平移）：

let touchCount = 0;

document.addEventListener('touchstart', (e) => {
  touchCount = e.touches.length;
});

document.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    e.preventDefault();
  }
}, { passive: false }); // 必须设置passive:false，否则iOS不允许调用preventDefault

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

二、手动实现捏合缩放逻辑 #

通过跟踪双指的位置变化计算缩放比例，联动你的WebGL渲染逻辑：

let initialDistance = 0;
let initialScale = 1; // 替换成你当前地图的实际缩放值

document.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    const [touch1, touch2] = e.touches;
    // 计算双指初始间距
    initialDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
    initialScale = currentMapScale; // 记录当前缩放状态
  }
});

document.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    const [touch1, touch2] = e.touches;
    const currentDistance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
    // 计算缩放比例
    const scaleFactor = currentDistance / initialDistance;
    // 更新地图缩放值
    currentMapScale = initialScale * scaleFactor;
    // 调用你的WebGL渲染更新方法，比如调整相机矩阵
    updateMapRender();
  }
});

注意替换currentMapScale和updateMapRender()为你项目中的实际变量和渲染函数。

三、解决触摸事件调试难题 #

1. 电脑端模拟触摸操作：
   打开Chrome DevTools的「设备工具栏」（快捷键Ctrl+Shift+M），选择iOS设备型号，按住Shift键拖动鼠标即可模拟双指触摸，直接在电脑上调试touch事件。

2. 移动端查看console输出：

   • Mac用户：打开Safari偏好设置，在「高级」里勾选「在菜单栏中显示“开发”菜单」，用数据线连接iOS设备后，在Mac的Safari「开发」菜单中选择对应设备和页面，就能打开调试控制台查看log。
   • 跨平台方案：在页面中引入vConsole的本地JS文件，页面底部会生成一个调试面板，移动端可直接点击查看console输出、网络请求等信息。

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