2013-02-09 63 views
6

meta name =「viewport」設置爲用戶時,如何檢測縮放的縮放(或距離捏) -scalable =是JavaScript:當'用戶可縮放'設置爲yes時,檢測縮放以進行縮放

我已經在Android上進行測試,但如果META NAME =「視口」設置爲用戶可擴展= YES無法檢測到放大了壓力。如果meta name =「viewport」設置爲user-scalable = no那麼可以檢測到縮放縮放,但之後我無法放大文檔。

這裏是我的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 
    }); 
}); 

有人有一個答案?實現這一

+0

你看過jQuery插件Touchy了嗎? [touchyjs.org](http://touchyjs.org/) – Cholesterol 2014-01-09 21:25:35

+0

圖像在jsfiddle中不起作用。我現在無法檢查它是如何工作的。你的意思是本地縮放不起作用或「縮小」縮放? – fearis 2014-04-10 00:49:34

+2

我會參考這個StackOverflow問題的答案: http://stackoverflow.com/questions/11183174/simplest-way-to-detect-a-pinch。 – 2014-05-16 18:47:29

回答

0

的一種方法是用一個通用touchstart處理程序:

  • 等待直到用戶開始觸摸的至少兩個點(event.touches.length> 1)
  • 注意在x &ÿ兩個觸摸的開始座標,附加touchend聽衆
  • 等到觸摸結束。
  • 刪除touchend監聽器&測量距離。

更簡單的方法是使用手勢事件和event.scale屬性,在Simplest way to detect a pinch處查看詳細答案。