6

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

我已经在 Android 上进行了测试，但如果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  
    });
});

有人有答案吗？

4

2 回答 2

1

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

于 2019-01-25T09:44:20.303 回答
0

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

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

使用手势事件和 event.scale 属性更容易，有关更多详细信息，请参阅最简单的方法来检测捏合的最佳答案。

于 2014-06-22T10:43:53.850 回答