Désactiver le double-tap “zoom” option dans le navigateur sur les appareils tactiles

Je veux désactiver la double-tap zoom fonctionnalité sur les éléments dans le navigateur (sur les appareils tactiles), sans désactiver toutes les fonctionnalités de zoom.

Par exemple: Un élément peut être exploitée à plusieurs fois pour que quelque chose arrive. Cela fonctionne bien sur les navigateurs de bureau (comme prévu), mais sur la touche de l'appareil navigateurs, il fera un zoom avant.

Mais pas de zoom, mais voici quelques autres essentielles - `-webkit-touch-légende: none; -webkit-text-size-adjust: none; -webkit-user-select: none;

OriginalL'auteur Wouter Konecny | 2012-05-16

45
```
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
etc...
</head>
```
J'ai utilisé que très récemment et il fonctionne très bien sur iPad. Ne l'ai pas testé sur Android ou d'autres appareils (parce que le site web sera affiché sur l'iPad uniquement).

Qui permet de désactiver TOUTES les fonctionnalités de zoom, malheureusement, ce n'était pas ma question. Je veux désactiver uniquement les éléments spécifiés.
Que diriez-vous cette solution? C'est seulement sur iOS, mais peut-être tweakable? : gist.github.com/2047491
Si vous supprimez le useragent de vérifier qu'il devrait fonctionner sur n'importe quel périphérique qui prend en charge les évènements touchstart événement. Pour détecter ces dispositifs, vous pouvez utiliser quelque chose comme isEventSupported
Ne fonctionne pas sur iOS 10 plus, grâce à Apple.
Apple maintenant officiellement ignore cela. github.com/w3c/html/issues/602

OriginalL'auteur Kablam
36

Je sais que cela peut être vieux, mais j'ai trouvé une solution qui a fonctionné parfaitement pour moi. Pas besoin de fou balises meta et l'arrêt de contenu zoom.

~~je ne suis pas 100% sûr de la façon cross-device, c'est~~, mais il fonctionne exactement comme je le souhaitais.
```
$('.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.
})
```
Ce sera tout simplement désactiver la normale de la fonction de tapotement, et ensuite appeler un standard, cliquez sur l'événement à nouveau. Cela empêche l'appareil mobile de zoom, mais sinon fonctionne comme d'habitude.

EDIT: C'est maintenant l'épreuve du temps et de l'exécution dans un couple des applications. Semble être 100% cross-browser et de la plate-forme. Le code ci-dessus devrait fonctionner comme un copier-coller de la solution pour la plupart des cas, sauf si vous voulez comportement personnalisé avant l'événement click.

simple mais super réponse. pas besoin de modifier les meta tags ou etc.
cela désactive les clics, je ne pense pas que c'est une bonne solution désolé
vous n'avez pas besoin de JS pour ce faire, vous pouvez simplement mettre l'attribut CSS pointer-events: none
Merci cela a fonctionné parfaitement pour la manipulation incrémenter/décrémenter boutons sans désactiver le zoom sur l'ensemble de la page.
Si je vois cela correctement, cela peut échouer dans certains situations où vous avez besoin de confiance des événements (par exemple clickin sur qqch qui provoque un plein ecran ou d'autres experimentals, comme le yneed de confiance des événements qui signifie DÉCLENCHÉE PAR l'UTILISATEUR/OS)

OriginalL'auteur Rockster160
29

Je voulais juste répondre à ma question bien que certaines personnes ne lisent pas les commentaires ci-dessous une réponse. Il est donc ici:
```
(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);
```
Je n'ai pas écrit cela, j'ai simplement modifié. J'ai trouvé l'iOS version ici: https://gist.github.com/2047491 (merci Kablam)

Cela ne semble pas fonctionner, du moins pas sur le SIII (w/ Android 4.0.4). J'ai essayé de liaison du document, du corps, de la fenêtre, *, pas de dés.
ne fonctionne pas pour moi sur mon AOC brise 2.3 tablet
Essayé moi aussi, fonctionne sur safari/ipad, android, de chrome mais pas avec le navigateur par défaut d'android
jquery n'est pas le javascript, il serait bien d'avoir un exemple de la façon de le faire sans une bibliothèque
Vous cherchez un non-jquery version 🙁

OriginalL'auteur Wouter Konecny
21

Moderne (en avril 2019), CSS seule solution

Ajouter touch-action: manipulation à n'importe quel élément sur lequel vous souhaitez désactiver le double appuyez sur zoom, comme avec le suivant disable-dbl-tap-zoom classe:
```
.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
```
De la touch-action docs (l'emphase est mienne):

manipulation

Permettre de panoramique et de zoom par pincement des gestes, mais désactiver supplémentaires non-standard des gestes tels que double-tap pour zoomer.

Cette valeur fonctionne sur Android et sur iOS.

solution la plus rapide. merci.
la plus rapide et la plus claire de la solution, merci beaucoup

OriginalL'auteur Ross Allen
12

Si vous avez besoin d'une version qui fonctionne sans jQuery, j'ai modifié Wouter Konecny réponse (qui a également été créée par la modification de ce gist par Johan Sundström) utiliser la vanille 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();
}
```
Puis ajouter un gestionnaire d'événements sur touchstart qui appelle cette fonction:
```
myButton.addEventListener('touchstart', preventZoom); 
```
brillant. je voulais juste dire que j'ai besoin d'ajouter une méthode addEventListener pour appeler cette. myButton.addEventListener('touchstart', preventZoom);

OriginalL'auteur Evrim Persembe
8

Vous devez définir la propriété css touch-action à none comme décrit dans cette autre réponse https://stackoverflow.com/a/42288386/1128216
```
.disable-doubletap-to-zoom {
    touch-action: none;
}
```
Cela fonctionne... mais si je veux désactiver le zoom, mais laissez les autres événements tactiles? J'ai une grande table, ce qui permet également de désactiver le défilement.
Si vous souhaitez seulement de se débarrasser d'un double-tap zoom, vous devez définir la valeur de 'touch-action: manipuler;" Cela permettra toujours de panoramique et de zoom par pincement. Remarque importante: Cela permet aussi de se débarrasser de la cliquez sur le retard des navigateurs adoptées pour mettre en œuvre appuyez deux fois sur zoom. voir developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Sur quelle balise HTML doit cette classe?
Je pense que vous pouvez simplement ajouter à tout élément que vous ne voulez pas l'utiliser pour effectuer un zoom avant. Par exemple, dans mon cas, je n'ai pas envie à l'utilisateur de zoomer sur une partie quelconque de ma page, donc je l'ai ajouté à la balise body.

OriginalL'auteur Jonathan Morales Vélez
5

CSS pour désactiver le double-tap zoom à l'échelle mondiale (sur n'importe quel élément):
```
  * {
      touch-action: manipulation;
  }
```
manipulation

Permettre de panoramique et de zoom par pincement des gestes, mais de les désactiver supplémentaires non-standard des gestes tels que le double-tap pour zoomer.

Grâce Ross, ma réponse s'étend de son: https://stackoverflow.com/a/53236027/9986657

OriginalL'auteur Jan
1

Simple de prévenir le comportement par défaut de click, dblclick ou touchend événements permet de désactiver la fonctionnalité de zoom.

Si vous avez déjà un rappel sur l'un de ces événements il suffit d'appeler un event.preventDefault().

Cela a fonctionné pour moi. J'étais définir ma propre évènements touchstart événement sur un bouton, et j'ai voulu désactiver la fonction de zoom.

OriginalL'auteur William Grasel

Cela permettra d'éviter la double appuyez sur zoom sur les éléments de "corps" cela peut être changé à n'importe quel autre sélecteur

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

});

Mais ceci empêche aussi ma cliquez sur l'événement de déclenchement lorsqu'il est cliqué plusieurs fois, donc j'ai eu la lier à un autre événement pour déclencher les événements sur plusieurs clics

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

Sur les évènements touchstart, j'ai ajouté le code pour éviter le zoom et le déclencheur d'un clic.

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

 });

OriginalL'auteur Dally S

0

Si il y a quelqu'un comme moi qui est confronté à ce problème à l'aide de Vue.js,
simplement en ajoutant .prévenir fera l'affaire: @click.prevent="someAction"

OriginalL'auteur Sølve Tornøe
-1

Je suppose que je dois avoir une <div> entrée de zone des conteneurs avec du texte, des curseurs et des boutons en elle, et que vous voulez pour inhiber accidentelle double-tap dans ce <div>.
La suite n'inhibe pas de zoom sur la zone de saisie, et elle ne se rapporte pas à double-tap et de zoom à l'extérieur de mon <div> zone. Il y a des variations en fonction de l'application navigateur.

Je l'ai juste essayé.

(1) Pour Safari sur iOS et Chrome sur Android, et est la méthode préférée. Fonctionne sauf pour Internet application sur Samsung, où il désactive le double-tap pas sur la totalité de la <div>, mais au moins sur les éléments qui la poignée de robinets. Il retourne return false, à l'exception sur text et range entrées.
```
$('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) Éventuellement intégré dans Internet application sur Android (5.1, Samsung), inhibe le double-tap sur le <div>, mais inhibe zoomer sur la <div>:
```
$('selector of <div> input area').on('touchstart touchend',disabledoubletap);
```
(3) Pour Chrome sur Android 5.1, désactive le double-tap à tous, n'inhibe pas le zoom, et ne fait rien sur le double-tap dans les autres navigateurs.
Le double-tap-l'inhibition de la <meta name="viewport" ...> est énervant, parce <meta name="viewport" ...> semble de bonnes pratiques.
```
<meta name="viewport" content="width=device-width, initial-scale=1, 
          maximum-scale=5, user-scalable=yes">
```
OriginalL'auteur Peter
-1

À l'aide de CSS touch-events: none
Complètement prend tous les événements tactiles. Juste laisser ça ici au cas où quelqu'un a aussi ce problèmes, m'a pris 2 heures pour trouver cette solution, et c'est une seule ligne de css.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

OriginalL'auteur Ásgeir Frímannsson
-2

Ici nous allons

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

OriginalL'auteur notsure

Vous devez vous connecter pour publier un commentaire.