如何防止本机浏览器默认捏缩放行为？

Question

这个问题已经被问过几个不同的口味，但 none 满意。

本机浏览器（例如 Google Chrome for Mac）默认支持 "pinch to zoom" 手势，这将缩放整个视口。如何禁用（响应）此默认行为以便我可以编写自己的 pinching/zooming 逻辑？ Google 地图 https://maps.google.com/ 似乎已经实现了这一点，因为在地图上捏合只会缩放地图区域，UI 的其余部分保持原样，而在左侧边栏上捏合显示默认行为.

我尝试了一些方法，例如 HTML "viewport" 元标记、CSS touch-action: none; 和 JavaScript document.addEventListener('touchmove', e => { e.preventDefault() })，但它们所有似乎都只能在移动设备上使用。

Answer 1

使用此元标记：

<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />

Answer 2

我无意中找到了适用于 Chrome 的解决方案。您基本上必须 preventDefault "wheel" 事件。 ctrlKey 将是 true 如果它是捏合事件而不是滚动。

element.addEventListener('wheel', event => {
   const { ctrlKey } = event
   if (ctrlKey) {
      event.preventDefault();
      return
   }
}, { passive: false })

我想 Google 地图就是这样做的。

（大多数）跨浏览器解决方案可能是上述技术的组合：user-scalable=no 在 "viewport" 元标记中用于支持它的浏览器，而这个用于本机 Chrome.

如何防止本机浏览器默认捏缩放行为？

How to prevent native browser default pinch to zoom behavior?

javascript

browser

google-maps

zooming

pinchzoom