防止沒有jQuery的雙擊縮放

在最新的iOS Safari中，意外的雙擊縮放無法阻止，所以我的全屏地圖應用程序有時會失去對用戶的控制權。防止沒有jQuery的雙擊縮放

我用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的等價物是什麼？

來源

2017-02-25 kochizufan

試試這個：

(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毫秒延遲太長。

來源

2017-03-15 17:42:54 seleckis

它的作品完美！謝謝！ – kochizufan

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

來源

2017-02-25 01:05:46 linc

我可能是錯在這一點;不過，從我的理解中可以看出，自iOS 10起，此功能僅適用於Web應用程序。我不相信它在Safari Mobile上正常運行。 –

ahhh - 是的，只是測試它 - 不適用於safari移動 - – linc

這應該工作 - 添加CSS

html,body{user-zoom:fixed;}

來源

2017-05-18 11:04:34 linc

防止沒有jQuery的雙擊縮放

回答

相關問題