Deaktivieren Sie die Doppelklick-Option „Zoom“ im Browser auf Touch-Geräten

112

Ich möchte deaktivieren die Doppel-Tap Zoom - Funktionalität auf spezifizierten Elemente im Browser (auf Touch - Geräte), ohne all die Zoom - Funktion zu deaktivieren .

Beispiel: Ein Element kann mehrmals getippt werden, damit etwas passiert. Dies funktioniert in Desktop-Browsern (wie erwartet) einwandfrei, in Touch-Geräte-Browsern wird es jedoch vergrößert.

html browser touch zoom Wouter Konecny
quelle

Obwohl nicht zum Zoomen, aber hier sind einige andere wichtige - `-webkit-touch-callout: keine; -webkit-text-size-adjust: keine; -webkit-user-select: keine;

Udayraj Deshmukh

98

Hinweis (Stand 04.08.2018): Diese Lösung scheint in iOS Safari v12 + nicht zu funktionieren. Ich werde diese Antwort aktualisieren und diese Notiz löschen, sobald ich eine klare Lösung für iOS Safari gefunden habe.

Nur-CSS-Lösung

Fügen Sie touch-action: manipulationjedem Element hinzu, für das Sie den Doppelklick-Zoom deaktivieren möchten, wie bei der folgenden disable-dbl-tap-zoomKlasse:

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

Aus den touch-actionDokumenten (Schwerpunkt Mine):

Manipulation

Aktivieren Sie die Schwenk- und Zoom-Zoom-Gesten, deaktivieren Sie jedoch zusätzliche nicht standardmäßige Gesten, z. B. zweimaliges Tippen, um zu zoomen .

Dieser Wert funktioniert unter Android und iOS.

Ross Allen
quelle

@SergoPasoevi, können Sie ein Beispiel erstellen, das nicht funktioniert? Ich verwende diese Lösung für iOS 12 und sie funktioniert für mich.

Ross Allen

Ich sehe das gleiche Problem wie @SergoPasoevi, funktioniert nicht unter iOS 12

Trevor Jex

Arbeitete für mich auf iOS 12!

KB2497

2

Was sind die Nachteile, wenn Sie Ihren ganzen Körper mit Berührungsaktionen umhüllen: Manipulation?

Sauerstoff

1

Funktioniert unter dem neuesten iOS nicht, wenn Sie zweimal auf ein Bild tippen.

Adam Silver

54

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

Ich habe das vor kurzem benutzt und es funktioniert gut auf dem iPad. Nicht auf Android oder anderen Geräten getestet (da die Website nur auf dem iPad angezeigt wird).

Kablam
quelle

16

Das wird ALLE Zoomfunktionen deaktivieren, leider war das nicht meine Frage. Ich möchte nur bestimmte Elemente deaktivieren.

Wouter Konecny

Oi Mist. Ich lese es umgekehrt, scheitert an mir. Es tut uns leid!

Kablam

5

Wie wäre es mit dieser Lösung? Es ist nur iOS, aber vielleicht optimierbar? : gist.github.com/2047491

Kablam

2

@WouterKonecny Wenn Sie die Useragent-Überprüfung entfernen, sollte sie auf jedem Gerät funktionieren, das das Touchstart-Ereignis unterstützt. Um diese Geräte zu erkennen, können Sie so etwas wie isEventSupported

nxt

4

Apple ignoriert dies nun offiziell. github.com/w3c/html/issues/602

Katamphetamin

38

Ich weiß, dass dies vielleicht alt ist, aber ich habe eine Lösung gefunden, die perfekt für mich funktioniert hat. Keine Notwendigkeit für verrückte Meta-Tags und kein Stoppen des Zooms von Inhalten.

~~Ich bin mir nicht 100% sicher, wie geräteübergreifend es ist~~, aber es hat genau so funktioniert, wie ich es wollte.

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

Dadurch wird einfach die normale Tippfunktion deaktiviert und anschließend erneut ein Standardklickereignis aufgerufen. Dies verhindert, dass das mobile Gerät zoomt, funktioniert aber ansonsten wie gewohnt.

BEARBEITEN: Dies wurde jetzt getestet und läuft in einigen Live-Apps. Scheint 100% browser- und plattformübergreifend zu sein. Der obige Code sollte in den meisten Fällen als Copy-Paste-Lösung funktionieren, es sei denn, Sie möchten vor dem Klickereignis ein benutzerdefiniertes Verhalten .

Rockster160
quelle

einfache aber gute Antwort. Keine Notwendigkeit, Meta-Tags oder etc. zu ändern

Benchpresser

2

Dies deaktiviert Klicks, ich denke nicht, dass es eine gute Lösung ist, sorry

Pixelomo

6

Sie brauchen JS nicht, um dies zu tun. Sie können einfach das CSS-Attribut pointer-events: none

festlegen

1

Vielen Dank, dass dies perfekt für die Handhabung von Inkrementierungs- / Dekrementierungsschaltflächen funktioniert hat, ohne den Zoom auf der gesamten Seite zu deaktivieren.

Ramón

1

Wenn ich das richtig sehe, kann dies in bestimmten Situationen fehlschlagen, in denen Sie vertrauenswürdige Ereignisse benötigen (z. B. Klicken auf etw, das Vollbild oder andere Experimente auslöst, als vertrauenswürdige Ereignisse, dh TRIGGERED BY USER / OS)

Manuel Graf

29

Ich wollte meine Frage nur richtig beantworten, da einige Leute die Kommentare unter einer Antwort nicht lesen. Hier ist es also:

(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);

Ich habe das nicht geschrieben, ich habe es nur modifiziert. Ich habe die Nur-iOS-Version hier gefunden: https://gist.github.com/2047491 (danke Kablam)

Wouter Konecny
quelle

1

Dies scheint nicht zu funktionieren, zumindest nicht auf dem SIII (mit Android 4.0.4). Ich habe versucht, an Dokument, Körper, Fenster, * zu binden, keine Würfel.

Max

Versuchte mich auch, funktioniert auf Safari / iPad, Android Chrome, aber nicht mit Android Standardbrowser

Strae

2

jquery ist kein Javascript, es wäre schön, ein Beispiel dafür zu haben, wie man dies ohne Bibliothek macht

Martijn Scheffer

Auf der Suche nach einer Nicht-JQuery-Version :-(

Timo

Auch hier ist jQuery kein Javascript und sollte nicht gefördert werden, da es mit Websites, die auf moderneren Ideen wie Angular basieren, nicht gut funktioniert. Lesen Sie die Frage

Martijn Scheffer

15

CSS zum Deaktivieren des Doppelzoom-Zooms global (für ein beliebiges Element):

  * {
      touch-action: manipulation;
  }

Manipulation

Aktivieren Sie Schwenk- und Pinch-Zoom-Gesten, deaktivieren Sie jedoch zusätzliche nicht standardmäßige Gesten, z. B. zweimaliges Tippen zum Zoomen.

Vielen Dank, Ross, meine Antwort erweitert seine: https://stackoverflow.com/a/53236027/9986657

Jan.
quelle

1

Dies sollte als Antwort markiert werden. Ich habe versucht, es nur auf HTML und Body zu setzen, aber es hat in iOS 13.2 nicht funktioniert. Das funktioniert.

R OMS

Dies funktioniert unter iOS 13 an sich nicht, aber in Verbindung mit diesem Code tippt es auf, um die React-App vollständig zu zoomen. document.getElementById('root').addEventListener('click', () => {})

Sergei

Apple deaktiviert Tippen, um auf ios13 zu zoomen. Wie können Sie sagen, dass es unter iOS13 nicht funktioniert?

Sauerstoff

15

Wenn Sie eine Version benötigen, die ohne jQuery funktioniert , habe ich die Antwort von Wouter Konecny (die auch durch Ändern dieses Kerns von Johan Sundström erstellt wurde ) geändert , um Vanille-JavaScript zu verwenden.

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();
}

Fügen Sie dann einen Ereignishandler hinzu touchstart, der diese Funktion aufruft:

myButton.addEventListener('touchstart', preventZoom);

Evrim Persembe
quelle

3

brillant. Ich wollte nur erwähnen, dass ich einen addEventListener hinzufügen musste, um dies aufzurufen. myButton.addEventListener('touchstart', preventZoom);

Martin Jakubik

11

Sie sollten die CSS-Eigenschaft touch-actionauf nonewie in dieser anderen Antwort beschrieben setzen: https://stackoverflow.com/a/42288386/1128216

.disable-doubletap-to-zoom {
    touch-action: none;
}

Jonathan Morales Vélez
quelle

1

Das funktioniert ... aber was ist, wenn ich das Zoomen deaktivieren, aber andere Berührungsereignisse hinterlassen möchte? Ich habe eine große Tabelle und dies deaktiviert auch das Scrollen.

FrenkyB

2

Wenn Sie nur den Doppelklick-Zoom entfernen möchten, sollten Sie den Wert auf "touch-action: manipulate;" setzen. Dies ermöglicht weiterhin das Schwenken und Zoomen. Wichtiger Hinweis: Dies hilft auch dabei, die Browser mit Klickverzögerung zu entfernen, die für die Implementierung des Doppelklick-Zooms eingeführt wurden. siehe developer.mozilla.org/en-US/docs/Web/CSS/touch-action

cschuff

Auf welchem HTML-Tag sollte diese Klasse hinzugefügt werden?

Razvan Zamfir

Ich denke, Sie können es einfach zu jedem Element hinzufügen, in das Sie nicht hineinzoomen möchten. In meinem Fall wollte ich beispielsweise nicht, dass der Benutzer einen Teil meiner Seite vergrößert, also habe ich ihn dem Body-Tag hinzugefügt.

Jonathan Morales Vélez

1

Einfach verhindert , dass das Standardverhalten click, dblclickoder touchendEreignisse werden die Zoom - Funktion deaktivieren.

Wenn Sie bereits einen Rückruf zu einem dieser Ereignisse haben, rufen Sie einfach a an event.preventDefault().

William Grasel
quelle

1

Das hat bei mir funktioniert. Ich habe mein eigenes Touchstart-Ereignis auf einer Schaltfläche definiert und wollte die Zoomfunktion deaktivieren.

Rick Giuly

1

Wenn es jemanden wie mich , die dieses Problem mit erlebt Vue.js , einfaches Hinzufügen von .prevent den Trick:@click.prevent="someAction"

Sølve Tornøe
quelle

1

* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Deaktivieren Sie das Doppeltippen, um auf Touchscreens zu zoomen. Internet Explorer enthalten.

Erçin Dedeoğlu
quelle

0

Dadurch wird verhindert, dass Elemente in 'body' durch zweimaliges Tippen gezoomt werden. Dies kann in einen anderen Selektor geändert werden

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

});

Dies verhinderte jedoch auch, dass mein Klickereignis beim mehrmaligen Klicken ausgelöst wurde, sodass ich ein anderes Ereignis binden musste, um die Ereignisse bei mehreren Klicks auszulösen

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

Beim Touchstart habe ich den Code hinzugefügt, um das Zoomen zu verhindern und einen Klick auszulösen.

$('.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"
            }

 });

Dally S.
quelle

-1

Ich gehe davon aus, dass ich einen <div>Eingabecontainerbereich mit Text, Schiebereglern und Schaltflächen habe und versehentliche Doppelklicks verhindern möchte <div>. Das Folgende verhindert nicht das Zoomen des Eingabebereichs und bezieht sich nicht auf das Doppeltippen und Zoomen außerhalb meines <div>Bereichs. Je nach Browser-App gibt es Variationen.

Ich habe es gerade versucht.

(1) Für Safari unter iOS und Chrome unter Android ist dies die bevorzugte Methode. Funktioniert mit Ausnahme der Internet-App unter Samsung, bei der Double-Taps nicht vollständig deaktiviert werden <div>, sondern zumindest bei Elementen, die Taps verarbeiten. Es return falsewird mit Ausnahme von textund rangeEingaben zurückgegeben.

$('selector of <div> input area').on('touchend',disabledoubletap);

function disabledoubletap(ev) {

    var preventok=$(ev.target).is('input[type=text],input[type=range]');

    if(preventok==false) return false; 
}

(2) Optional für die integrierte Internet-App unter Android (5.1, Samsung), verhindert das zweimalige Tippen auf das <div>, verhindert jedoch das Zoomen auf <div>:

$('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(3) Deaktiviert für Chrome unter Android 5.1 das Doppeltippen, deaktiviert das Zoomen nicht und bewirkt nichts über das Doppeltippen in den anderen Browsern. Das Double-Tap-Inhibieren des <meta name="viewport" ...>ist irritierend, weil <meta name="viewport" ...>es eine gute Praxis zu sein scheint.

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

Peter
quelle

-2

Verwenden von CSS-Berührungsereignissen: keine Entfernt alle Berührungsereignisse vollständig aus. Wenn ich dies hier lasse, falls jemand auch diese Probleme hat, habe ich 2 Stunden gebraucht, um diese Lösung zu finden, und es ist nur eine Zeile von CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Ásgeir Frímannsson
quelle

-4

Auf geht's

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

nicht sicher
quelle

Deaktivieren Sie die Doppelklick-Option „Zoom“ im Browser auf Touch-Geräten

Antworten: