当“用户可缩放"设置为“是"时，检测捏缩放

问题描述

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

How can I detect the scale (or distance pinched) of the pinch to zoom when the meta name="viewport" is set to user-scalable=yes?

我已经在Android上进行了测试，但是如果meta name="viewport"设置为user-scalable=yes，则无法检测到缩放的压力.如果meta name="viewport"设置为user-scalable=no，则可以检测到缩放的捏合，但是我无法放大文档.

I've tested on Android but the pinch to zoom can't be detected if the meta name="viewport" is set to user-scalable=yes. If the meta name="viewport" is set to user-scalable=no then the pinch to zoom can be detected but then I'm not able to zoom in on the document.

这是我在jsFiddle上进行的测试:

Here are my tests on jsFiddle:

Hammer.js: http://jsfiddle.net/pE42S/

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/

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

有人有答案吗?

推荐答案

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

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

这篇关于当“用户可缩放"设置为“是"时，检测捏缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！