PhoneGap pinchzoom

Question

I apologize for the newbie question :

How do you implement the pinchzoom gesture in phonegap apps? I am just starting with PhoneGap and a little education wont hurt hehe !

Thnx!

Answer 1

My experience is that you don't implement it so much as you use it. Phonegap is essentially a webview (think mobile safari). So it does allow for automatic zooming gestures, but to implement it, you do so just as you would with any website (basically create web content that requires it, or utilize webkit calls for using it to resize elements), webkit will handle all the details for you (for better or worse).

Answer 2

Maybe a couple months too late, but this is what you want:

http://cubiq.org/iscroll-4

It's a plugin that you can apply to your div's that will give you this feature. It's very easy to use. It is somewhat costly in terms of performance though. I use this all the time. Enjoy!

Answer 3

I use hammer.js to handle all multi-touch gestures(including pinch-zoom) in my phonegap app http://eightmedia.github.com/hammer.js/ . I also want to point out a different stackoverflow question where pinch-zoom is done completely in css3, which can still be used in phonegap Pinch to zoom with CSS3

Answer 4

If you're already using d3.js in your Cordova app, I can recommend its own Zoom Behavior which works great on Android and iOS devices I've tested. See this page for an example, on a mobile browser you might have to browse to the raw version for best results.

One thing that initially got me was that the SVG selection being .called with the zoom behavior needs to actually span the area that you'd like to be responsive to any zoom gestures, e.g. I created a white background rectangle within the SVG I wanted to be zoomable.