Question

在最新的iOS Safari中，意外的双击缩放无法阻止，因此我的全屏地图应用程序有时会失去对用户的控制。

我用jQuery找到了解决方案，效果很好。

$.fn.nodoubletapzoom = function() {
    $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp;
        var t1 = $(this).data('lastTouch') || t2;
        var dt = t2 - t1;
        var fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) {
            return; // not double-tap
        }
        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(e.target).trigger('click');
    });
};
$('body').nodoubletapzoom();

但我想在没有jQuery的情况下这样做。

没有jQuery，这个代码的等价物是什么？

Answer 1

试试这个：

(function() {
    var lastTouch = 0;
    function preventZoom(e) {
        var t2 = e.timeStamp;
        var t1 = lastTouch || t2;
        var dt = t2 - t1;
        var fingers = e.touches.length;
        lastTouch = t2;

        if (!dt || dt >= 300 || fingers > 1) {
            return;
        }
        resetPreventZoom();
        e.preventDefault();
        e.target.click();
    }
    function resetPreventZoom() {
        lastTouch = 0;
    }

    document.addEventListener('touchstart', preventZoom, false);
    document.addEventListener('touchmove', resetPreventZoom, false);
})();

编辑：当我重置触摸间隔时，我通过听touchmove改进了，因为它可能会损害快速滚动。此外，我延迟300毫秒，因为这是触摸屏上常用的延迟。延迟500毫秒太长了。

Answer 2

<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 3

这应该有效 - 添加到css

html,body{user-zoom:fixed;}

不使用jQuery防止双击缩放

3 个答案: