Javascript 在'；用户可扩展'；设置为是

当

meta name=“viewport”

设置为

user scalable=yes

时，如何检测要缩放的收缩比例（或收缩距离）

我已经在Android上进行了测试，但是如果

meta name=“viewport”

设置为

user scalable=yes

，则无法检测到收缩缩放。如果

meta name=“viewport”

设置为

user scalable=no

，则可以检测到收缩缩放，但无法放大文档

以下是我对JSFIDLE的测试：

Hammer.js：

触摸屏：

---

有人有答案吗？

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

• 等待用户开始触摸至少两个点（event.touchs.length>1）
• 注意两个触摸的x&y开始坐标，附加触摸结束侦听器
• 等到比赛结束
• 移除touchend侦听器并测量距离

---

更简单的方法是使用手势事件和event.scale属性，有关更多详细信息，请参阅上的伟大答案。

现在您可以使用可视视口API来实现这一点（不是所有浏览器都可以）。只需检查

window.visualViewport.scale>1

您是否查看了jQuery插件Touchy？图像在JSFIDLE中不起作用。我现在无法检查它是如何工作的。你是说本机缩放不起作用还是“挤压”缩放？我会参考这个StackOverflow问题的答案：。为什么这对你不起作用：嘿，你已经很好地解释了逻辑。但是我想知道为什么我们没有使用它，如果我们使用屏幕X/Y坐标而不是PageX/Y坐标，我们不会得到结果吗？

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

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