禁用双击“缩放"触摸设备浏览器中的选项 [英] Disable double-tap "zoom" option in browser on touch devices

问题描述

我想在浏览器(在触摸设备上)禁用双击缩放功能指定元素，没有禁用所有缩放功能.

I want to disable the double-tap zoom functionality on specified elements in the browser (on touch devices), without disabling all the zoom functionality.

例如:一个元素可以被多次点击以发生某些事情.这在桌面浏览器上运行良好(如预期)，但在触摸设备浏览器上，它会放大.

For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in.

推荐答案

我只是想正确回答我的问题，因为有些人没有阅读答案下方的评论.所以这里是:

I just wanted to answer my question properly as some people do not read the comments below an answer. So here it is:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , 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
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);

这不是我写的，我只是修改了它.我在这里找到了仅限 iOS 的版本:https://gist.github.com/2047491(感谢 Kablam)

I did not write this, i just modified it. I found the iOS-only version here: https://gist.github.com/2047491 (thanks Kablam)

这篇关于禁用双击“缩放"触摸设备浏览器中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！