当'user-scalable'设置为yes时，如何检测捏合缩放？

Question

当设置为user-scalable=yes时，如何检测缩放比例（或距离）？ 我在Android上进行了测试，但如果设置为user-scalable=yes，则无法检测到缩放手势。 如果设置为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  
    });
});

有人有答案吗？

- user1480019

---

你看过jQuery插件Touchy吗？touchyjs.org - Cholesterol

图片在JSFiddle中无法工作。我现在无法检查它的工作方式。您是指本机缩放不起作用还是“捏”缩放不起作用？ - fearis

我会参考这个StackOverflow问题的答案：https://dev59.com/a2gu5IYBdhLWcg3wpYcj。 - óscar gutiérrez jr.

为什么这个对你不起作用：http://labs.rampinteractive.co.uk/touchSwipe/demos/Pinch_and_Swipe.html - flakerimi

Answer 1

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

- Grigory

Answer 2

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

• 等待用户开始触摸至少两个点（event.touches.length > 1）
• 注意两个触摸的x和y起始坐标，附加touchend监听器
• 等待触摸结束。
• 删除touchend监听器并测量距离。

更简单的方法是使用手势事件和event.scale属性，请参见检测捏合手势的最简单方法中的优秀答案以获取更多详细信息。

- Bruno

---

嘿，你讲解的逻辑很好，但我想知道为什么我们没有使用屏幕X/Y坐标代替页面X/Y坐标？如果使用屏幕X/Y坐标，我们不也能得到结果吗？ - BOZ