Question

I am looking to utilize swipe events on a mobile web app (Android, and iOS), but I also need the browsers native pinch to zoom functionality to stay in place.

I have tried using various touch event libraries such as Hammer.js, but all seem to discard mobile Safari’s pinch to zoom functionality when swipes are handled. It would also be nice to keep vertical scrolling intact as well.

Basically, I am looking for a way to recognize left/right direction swipes, and only that. Any ideas?

Answer 1

I used similar functionality to this in a recent project. To allow the pinch to zoom functionality to work you just need to make sure you correctly specify the values in the viewport tag eg.

<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/>

The most important values are the user-scalable=yes and also the maximum scale since this must be greater than 1.0 to allow for zooming.

You can find more information on viewport here: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

For the swipe events you can bind the swipeleft and swiperight events to a .on() function in jQuery Mobile.

Here is an example of what your code should look like:

$('#yourElement').on('swipeleft swiperight', function (event) {
    //swiped to the left
    if (event.type == "swipeleft") {
        //do something
    }
    //swiped to the right
    if (event.type == "swiperight") {
       //do something
    }
});

For more info on jQuery Mobile events you can check out this link (or the link m_gol provided above since they are basically the same):

http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Using both sets of code above, you will be able to detect swipe events as well as pinch to zoom the page.