检测移动浏览器的缩放手势

Question

我想知道是否有办法检测用户正在进行捏合缩放操作。

我想在用户缩放时做两件事情：

1. 让该div对齐屏幕左侧。 2. 将该div的宽度设置为视口宽度。

我发现Android有touchstart、touchend和touchmove事件，但是它们在多点触控时不会被触发。我想在缩放完成后立即完成上述功能。

还有其他方法吗？

我没有做Web应用程序，我只是在移动版中添加一些功能。

- Roger Chan

---

与 - https://dev59.com/GGbWa4cB1Zd3GeqPUDLZ 相关 - vsync

Answer 1

Android浏览器支持使用JavaScript的touchstart、touchend和touchmove事件，但旧版Android设备存在的问题是这些事件检测到的触摸数量。

例如，此代码将在IOS和新版Android设备上记录消息：

var obj = document.getElementById('elmId');
obj.addEventListener('touchmove', function(event) {
  if (event.targetTouches.length == 2) {
    console.log("exactly 2 fingers gesture inside elmId ");
  }
}, false);

旧版的安卓系统不会有任何反应，因为event.targetTouches.length永远不会等于2。

在我看来，你应该采用这种方法，它可以支持大多数设备，并为旧设备提供后备选项（使用其他手势进行缩放，如双击或按钮缩放）。

- AssafDamari

---

我尝试过这种方法，但是函数触发得太早，而且只触发了一次。 我得到的值不是最新的。 以下是示例。 http://off.theorigo.com/~rogerchan/index.html - Roger Chan

Answer 2

Android有一个ScaleGestureDetector。这里是一个例子。然而，如果你需要额外的多点触控支持，例如旋转，我建议使用这个库。我个人使用过它（来存储和检索多个图像的变换矩阵），发现它是一个非常好的资源。

- Dhruv Gairola

---

感谢您的回答。 但是您示例中的代码是Java的。 如何将它们添加到普通的HTML或JavaScript文件中呢？ - Roger Chan

其实我也不太确定。你可以看看这个问题：https://dev59.com/XHE85IYBdhLWcg3wikEu - Dhruv Gairola