javascript - 检测移动浏览器捏缩放

Question

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

用户放大时我想做两件事：

1. 让 div 对齐屏幕左侧
2. 设置 div 的宽度等于视口宽度

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

还有其他方法吗？

---

我没有做网络应用程序。我只是在移动版本中添加了一些功能。

Answer 1

Android 浏览器支持touchstart, touchend&touchmove和 JavaScript，但旧版 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.

恕我直言，您应该使用这种支持大多数设备并为旧设备提供后备选项的方法（使用其他手势进行缩放，例如双击或按钮进行缩放）。

Answer 2

Android 有一个ScaleGestureDetector。这是一个例子。但是，如果您需要额外的多点触控支持，例如旋转，我会推荐这个库。我个人使用过它（用于存储和检索多个图像的转换矩阵）并发现它是一个很好的资源。