检测移动浏览器捏缩放

Question

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

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

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

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

还有其他方法吗？

---

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

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。

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

Answer 2

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