Question

当元名称=“视口”设置为 user-scalable = yes 时，如何检测缩放的缩放比例（或缩放距离）？

我已经在Android上进行了测试，但如果元名称=“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

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

等到用户开始触摸至少两个点（event.touches.length＆gt; 1）
请注意x＆amp; y开始两个触摸的坐标，附加touchend听众
等到接触结束。
删除touchend听众＆amp;衡量距离。

更容易使用手势事件和event.scale属性，请参阅Simplest way to detect a pinch的精彩答案以获取更多详细信息。

Answer 2

现在，您可以为此使用Visual Viewport API（不适用于所有浏览器）。只需检查window.visualViewport.scale > 1。

JavaScript：当'user-scalable'设置为yes时，检测到缩放以缩放

2 个答案: