Question

I have a website that displays a mashup on Google Map. When I try to zoom into the map on a mobile web browser, the page gets the zoom instead on most occasions. Is there a HTML, CSS or javascript method that prevents the page from zooming while my fingers are touching the map?

I tried <meta name='viewport' content='user-scalable=no'>, but that prevents the map from zooming as well.

Answer 1

This can be done by using Gesture events.You can call touchstart event, and then call

e.originalEvent.preventDefault();  //if you are using JQuery

this prevent your page from zoom in.