Google Chrome防止捏合缩放功能

Question

我正在为运行Windows 8.1的Microsoft Surface Pro 2上的Chrome开发应用程序。最近，Chromium团队决定在Windows 8的Chrome中添加捏合缩放手势，这是好的。然而，他们没有在Chrome的设置中添加一个标志来禁用那些不想要捏合缩放功能的人的这种行为。

现在我正在尝试通过其他方式禁用浏览器的默认行为。我尝试的第一件事是添加这个meta标签：

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

没用。我还尝试使用hammer.js触摸库来禁用这种行为，但成功有限；以足够快的速度捏合仍会缩放页面。

有人知道如何有效地在Windows 8.1的Chrome上禁用捏合缩放行为吗？

- Piper

---

尝试使用以下代码： document.addEventListener('touchmove', function(event){ event.stopPropagation(); event.preventDefault(); }); - Ron Gilchrist

谢谢，Ron。你的建议有效，但是由于滚动显然也被视为touchmove类型事件，因此它被阻止了。换句话说，我的页面上所有的滚动都被破坏了:c( - Piper

你可以查看 event.touches.length === 2 是否成立，如果是，则取消操作，因为你知道这是一个缩放操作，而不是滚动或平移。 - Ron Gilchrist

我实际上考虑过并测试了它。它可以在不破坏滚动的情况下正常工作。 - Piper

@RonGilchrist 这应该是答案，顺便问一下，这是针对Chrome>45的吗？ - Nikos

Answer 1

基于用户的方法：

启用视口元标记支持，方法如下：

1. 前往 chrome://flags
2. 点击启用 "启用视口元标记"

编程方法

(如上面所建议的评论)：

1. 监听 touchmove 事件
2. 如果检测到两个触摸，则调用 preventDefault

注意：始终防止 touchmove 会导致简单滚动停止工作。

- Matyas

---

我还可以补充一点，在最近的更新中，Chrome 添加了一组新的标志。其中包括用于 Pinch-to-Zoom、水平滚动以浏览历史记录等的切换标志。因此，一种基于用户的方法可能是特别禁用 PtZ（在这种情况下，访问过的页面不一定需要视口元标记来禁用 PtZ）。 - Piper

这是官方最佳答案。不要考虑 meta viewport，因为它 不是 一个标准。 - trusktr

在Chrome 48中，chrome://flags中没有“启用视口元标记”设置。 - 1800 INFORMATION

Answer 2

很遗憾，似乎无法完全阻止。

Matyas的解决方案在您开始使用一个手指滚动并放下另一个手指进行缩放时将非常有效。

在这种情况下调用preventDefault会导致警告：“忽略了取消不可取消的touchmove事件的尝试，例如因为滚动正在进行中且不能被打断。”

而缩放功能并没有被阻止。

这似乎是一个错误。

- user169771

---

如果您自己制作可滚动的内容（例如移动元素的位置以模拟滚动），那就没问题了。 :D - trusktr