web-dev-qa-db-ja.com

タッチデバイスのブラウザーでダブルタップの「ズーム」オプションを無効にします

無効ダブルタップズーム機能指定された要素上ブラウザー（タッチデバイス上）、すべてを無効にせずに）ズーム機能。

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

htmlbrowsertouchzoom
76
Wouter Konecny

一部の人々は答えの下のコメントを読んでいないので、私はちょうど私の質問に適切に答えたかったです。だからここにある：

(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）

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

私はそれをごく最近使用しました、そして、それはiPadでうまく働きます。 Androidまたはその他のデバイスでテストしていません（WebサイトはiPadでのみ表示されるため）。

46
Kablam

現代（2019年4月現在）、CSSのみのソリューション

次のtouch-action: manipulationクラスのように、ダブルタップズームを無効にする要素にdisable-dbl-tap-zoomを追加します。

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

touch-action docs（emphasis mine）から：

操作

パンとピンチズームジェスチャを有効にしますが、disabledouble-tap to zoom。

この値は、AndroidおよびiOSで機能します。

38
Ross Allen

これは古いかもしれませんが、私にとって完璧に機能する解決策を見つけました。クレイジーなメタタグやコンテンツズームの停止は不要です。

クロスデバイスであるかどうかは100％わかりません、しかし、それは私が望んでいた通りに機能しました。

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

これにより、通常のタップ機能が無効になり、標準のクリックイベントが再度呼び出されます。これにより、モバイルデバイスはズームできなくなりますが、それ以外は通常どおり機能します。

編集：これは現在、タイムテストされており、いくつかのライブアプリで実行されています。 100％クロスブラウザーとプラットフォームのようです。上記のコードは、カスタム動作before clickイベントが必要な場合を除き、ほとんどの場合、コピーアンドペーストソリューションとして機能するはずです。

36
Rockster160

jQueryなしで動作するのバージョンが必要な場合、 Wouter Konecnyの答え を変更しました（これは this Gist を JohanSundström ）Vanilla JavaScriptを使用します。

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);
13
Evrim Persembe

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

.disable-doubletap-to-zoom {
    touch-action: none;
}
9
Jonathan Morales Vélez

ダブルタップズームをグローバルに無効にするCSS（任意の要素）：

  * {
      touch-action: manipulation;
  }

操作

パンおよびピンチズームジェスチャを有効にしますが、ダブルタップしてズームするなどの追加の非標準ジェスチャを無効にします。

ロスに感謝します、私の答えは彼を拡張します： https://stackoverflow.com/a/53236027/9986657

6
Jan

click、dblclick、またはtouchendイベントのデフォルトの動作を単純に防止すると、ズーム機能が無効になります。

このイベントのいずれかで既にコールバックがある場合は、event.preventDefault()を呼び出してください。

1
William Grasel

Vue.jsを使用してこの問題が発生している私のような人がいる場合、単に 。prevent を追加するだけでうまくいきます： @click.prevent="someAction"

0
Sølve Tornøe

これにより、「body」内の要素をダブルタップでズームできなくなり、他のセレクターに変更できます

$('body').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');

});

しかし、これにより、複数回クリックしたときにクリックイベントがトリガーされないため、複数のクリックでイベントをトリガーするために別のイベントをバインドする必要がありました

$('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

タッチスタートで、ズームを防ぎクリックをトリガーするコードを追加しました。

$('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                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');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });
0
Dally S