使用JavaScript/Hammer.js检测Android的捏合缩放innerWidth

Question

我希望知道缩放时的innerWith/viewport宽度，如果宽度小于500像素，我想使用以下图片进行更改：

$("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");

我尝试过类似于这样的东西：

var hammer = new Hammer(document.getElementById("log"));

hammer.ontransformstart = function(ev) {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    if (pziW < 500) {
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
    }
};
hammer.ontransform = function(ev) {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    if (pziW < 500) {
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
    }
};
hammer.ontransformend = function(ev) {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    if (pziW < 500) {
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
    }
};

但我不知道如何声明pinch to zoom的innerWidth。以下是jsFiddle链接，是否有人有答案？：http://jsfiddle.net/nLvu6/

- user1480019

Answer 1

你需要检测的不是innerWidth。

请看传递给hammer函数的ev变量：

distance: 0
distanceX: 0
distanceY: 0
originalEvent: TouchEvent
position: Object
rotation: 124.85234015769826
scale: 2.0725083746457824
touches: Array[0]
type: "transformend"
__proto__: Object

scale: 2.0725083746457824 是我们想要的。如果比例高于或低于某个阈值，则执行图像替换函数。

我已经fork了你的JSFiddle。请在这里查看：http://jsfiddle.net/BFBrU/14/

- Luqmaan

---

我尝试使用以下代码计算innerWidth：pziW = $(window).innerWidth() / 2 * ev.scale; 但它一直返回0，我的计算有什么问题吗？更新的JSFiddle链接：http://jsfiddle.net/nLvu6/20/ - user1480019

另外在另一个论坛上，有人建议这个计算方法：在页面开始时：将视口宽度变量设置为初始宽度，在转换开始时：缩放变量=ev.scale（它将是1.0），在转换时：计算缩放增量（缩放变量-= ev.scale），视口宽度+ =视口宽度*缩放增量，缩放变量=ev.scale。我该如何进行计算？我已经尝试过这个：http://jsfiddle.net/nLvu6/22/和“hammer.bind”：http://jsfiddle.net/nLvu6/21/。 - user1480019