android - JavaScript: Detect pinch to zoom when 'user-scalable' is set to yes -

android - JavaScript: Detect pinch to zoom when 'user-scalable' is set to yes -

how can observe scale (or distance pinched) of pinch zoom when meta name="viewport" set user-scalable=yes?

i've tested on android pinch zoom can't detected if meta name="viewport" set user-scalable=yes. if meta name="viewport" set user-scalable=no pinch zoom can detected i'm not able zoom in on document.

here tests on jsfiddle:

hammer.js: http://jsfiddle.net/pe42s/

var pziw = "test"; var viewport_width = $(window).innerwidth(); var zoom = 0; var hammer = new hammer(document.getelementbyid("touchme")); hammer.ontransformstart = function(ev) { console.log("ontransformstart"); console.log(ev); //pziw = $(window).innerwidth() / 2 * ev.scale; zoom = ev.scale; var msg = "ontransformstart " + pziw + " scale " + zoom; log(msg); }; hammer.ontransform = function(ev) { console.log("ontransform"); console.log(ev); zoom -= ev.scale; viewport_width+=viewport_width*zoom; zoom = ev.scale; pziw=viewport_width; //pziw = $(window).innerwidth() / 2 * ev.scale; jqupdatesize(); var msg = "ontransform " + pziw + " scale " + zoom; log(msg); }; hammer.ontransformend = function(ev) { console.log("ontransformend"); console.log(ev); var msg = "ontransformend " + pziw + " scale " + zoom; log(msg); };

touchswipe: http://jsfiddle.net/pe42s/1/

$(function() { $("#touchme").swipe( { pinchstatus:function(event, phase, direction, distance , duration , fingercount, pinchzoom) { console.log("pinchstatus"); console.log(event); pziw=viewport_width - distance; $("#log").text(pziw); jqupdatesize(); }, fingers:2, pinchthreshold:0 }); });

somebody has answer?

one way accomplish generic touchstart handler:

wait until user starts touching @ to the lowest degree 2 points ( event.touches.length > 1) note x & y start coordinates both touches, attach touchend listeners wait until touches end. remove touchend listeners & measure distance.

even easier using gesture events , event.scale property, see great answers @ simplest way observe pinch more details.

javascript android jquery javascript-events hammer.js