当'user-scalable‘设置为yes时，检测要缩放的收缩

Question

当meta name="viewport"设置为user-scalable=yes时，如何检测要缩放的收缩的比例(或收缩距离

我已经在安卓上测试过了，但是如果meta name="viewport"设置为user-scalable=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  
    });
});

有人有答案吗？

Answer 1

现在，您可以使用Visual Viewport API来实现这一点(并非所有浏览器都适用)。只要查看window.visualViewport.scale > 1就可以了。

Answer 2

实现这一点的一种方法是使用通用的touchstart处理程序：

• 等待直到用户开始触摸至少两个点( event.touches.length >1)
• 注意两次触摸的x&y开始坐标，attach touchend listeners
• 直到触摸结束。
• 删除触摸端侦听器并测量距离。