1. ホーム
  2. html

[解決済み] タッチデバイスでブラウザのダブルタップによる「ズーム」オプションを無効にする

2022-05-01 09:24:54

質問

以下のことをしたい。 無効化 その ダブルタップズーム 機能性 指定された要素に をブラウザで表示します(タッチデバイスの場合)。 すべてのズーム機能を無効にすることなく .

例えば、こんな感じです。一つの要素を何度もタップして何かを起こすことができる。デスクトップ用ブラウザでは正常に動作しますが(予想通り)、タッチデバイス用ブラウザでは拡大表示されます。

解決方法は?

回答の下にあるコメントを読まない人がいるので、私の質問にきちんと答えたかっただけです。そこで、ここに書いておきます。

(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に感謝)