JavaScript: Rileva pizzico per ingrandire quando 'scalabile dall'utente' è impostato su sì

Question

Come posso rilevare la scala (o distanza pizzicata) del pizzico da ingrandire quando il meta2 nome "viewport" è impostato su utente -scalable = yes?

ho testato su Android, ma il pinch to zoom non possono essere rilevati se la meta name = "finestra" è impostato su user-scalable = yes. Se il meta name = "viewport" è impostato su scalabile dall'utente = no quindi è possibile rilevare il pizzico da ingrandire ma non riesco a ingrandire il documento.

Qui sono i miei test su 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 
    }); 
}); 

Qualcuno ha una risposta?

Answer 1

Un modo per ottenere questo sarebbe con un gestore TouchStart generico:

• Attendere finché l'utente inizia a toccare almeno due punti (event.touches.length> 1)
• Nota x y & avviare le coordinate per entrambi i tocchi, allegare gli ascoltatori di touchend
• Attendere fino al termine dei tocchi.
• Rimuovere gli ascoltatori di touchend & misurare la distanza.

Ancora più semplice sarebbe utilizzare gli eventi gesto e la proprietà event.scale, vedere le grandi risposte allo Simplest way to detect a pinch per ulteriori dettagli.