Define scaling to zoom in when User Scalable is set to yes

Question

How can I determine the scale (or distance clamped) of the pinch to increase when meta name="viewport" set to user-scalable=yes ?

I tested on Android, but zooming cannot be detected if meta name="viewport" set to user-scalable=yes . If meta name="viewport" set to user-scalable=no , then a shift to increase can be detected, but I cannot zoom in on the document.

Here are my jsFiddle tests:

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 }); }); 

Does anyone have an answer?

Answer 1

One way to achieve this is with the universal touchstart handler:

• Wait for the user to start touching at least two points (event.touches.length> 1)
• Pay attention to the coordinates of the beginning and end of x and y for both touches, attach touchhend listeners.
• Wait for the touch to end.
• Remove the listeners and measure the distance.

It would be even simpler to use gesture events and the event.scale property to get more detailed answers to the simplest way to detect a pinch .

Answer 2

Now you can use the Visual Viewport API for this (not for all browsers). Just check window.visualViewport.scale > 1 .