检测移动浏览器捏缩放

问题描述

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

I want to know if there is a way to detect user is doing pinch zoom.

1. 让div对齐屏幕的左侧


2. 将div的宽度设置为等于视口宽度

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

I found Android has touchstart, touchend and touchmove, but they won't be triggered during multitouch. I want to complete above function right after finishing zooming.

还有其他方法吗？

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

I am not doing the web app. I am just adding some functions to the mobile version.

推荐答案

Android浏览器支持 touchstart ， touchend &使用JavaScript的 touchmove ，但旧版机器人的问题是这些事件检测到的触摸次数。

Android browser supports touchstart, touchend & touchmove with JavaScript, but the problem with older androids is the number of touches these events are detecting.

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

For example, this code will log the message on IOS and on newer android devices:

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 。

Older androids will do nothing because event.targetTouches.length will never be equal to 2.

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

IMHO, you should use this approach that will support most devices and provide a fallback option for older devices (use other gestures for zooming like double tap or a button to zoom).

这篇关于检测移动浏览器捏缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！