检测移动浏览器捏缩放

Posted 2023-05-07

【中文标题】检测移动浏览器捏缩放

【英文标题】：Detect mobile browser pinch zoom

【发布时间】：2012-04-06 18:45:21

【问题描述】：

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

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

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

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

还有其他方法吗？

---

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

【问题讨论】：

相关 - ***.com/q/11517086/104380

【参考方案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。

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

【讨论】：

这个方法我试过了，但是功能触发太早，只有一次。我得到的值不是最新的。这是示例。 off.theorigo.com/~rogerchan/index.html

【参考方案2】：

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

【讨论】：

感谢您的回答。但是您示例中的代码是java。如何将它们添加到普通的 html 或 javascript 文件中？

不完全确定。你可以看看这个问题：***.com/questions/2727763/…