150

すべてのズーム機能を無効にすることなく、ブラウザー (タッチ デバイス) の指定された要素のダブルタップ ズーム機能を無効にしたいと考えています。

例: 1 つの要素を複数回タップすると、何かが発生します。これはデスクトップ ブラウザーでは正常に機能しますが (予想どおり)、タッチ デバイス ブラウザーでは拡大されます。

4

16 に答える 16

64 
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
etc...
</head>

私はそれをごく最近使用しましたが、iPadで正常に動作します。Android やその他のデバイスではテストしていません (Web サイトは iPad でのみ表示されるため)。

于 2012-05-16T08:17:51.307 に答える
29

回答の下のコメントを読まない人もいるので、質問に適切に回答したかっただけです。だからここにあります：

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

于 2012-06-06T08:17:22.187 に答える
16

jQuery なしで動作するバージョンが必要な場合は、バニラ JavaScript を使用するように Wouter Konecny の回答 (Johan Sundström がこの要点を変更して作成したもの)を変更しました。

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

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}

touchstart次に、この関数を呼び出すイベント ハンドラーを追加します。

myButton.addEventListener('touchstart', preventZoom);
于 2016-09-29T19:50:25.960 に答える
11

この他の回答https://stackoverflow.com/a/42288386/1128216で説明されているように、cssプロパティtouch-actionを設定する必要がありますnone

.disable-doubletap-to-zoom {
    touch-action: none;
}
于 2017-12-20T06:44:27.647 に答える
-4

どうぞ

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

于 2016-11-02T10:40:17.350 に答える