Mobile Pinch Zoom Gesture Detection in Javascript & JQuery

Posted June 24, 2012 in Javascript, jQuery, Mobile

Here is how to detect a pinch zoom gesture for mobile browsers in Javascript:

1
2
3
4
5
6
7
8
9
function onPinch(e) {
    if (e.scale > 1)
    {
        // React to the pinch zoom in here.
    } else if (e.scale < 1) {
        //React to the pinch zoom out here.
    }
}
document.getElementById("myPinchElement").ongestureend = onPinch;

You can also listen for the pinch event using jQuery like this:

1
$("#myPinchElement").on("gestureend", onPinch);

You can follow CainCode on twitter and subscribe to our RSS Feed for more solutions to programming problems.

Tags: , , ,

  • Grant

    Great help! Thanks.