Detect mobile browser pinch zoom

Question

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

I want to do two things when user zooming in:

1. let the div align the left side of screen
2. set the width of div equal to the viewport width

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.

Are there any other approaches?

---

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

Answer 1

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

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);

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).