Je souhaite désactiver la fonctionnalité de zoom double-tap sur des éléments spécifiés dans le navigateur (sur les appareils tactiles), sans désactiver toutes les fonctionnalités de zoom .
Par exemple: un élément peut être touché plusieurs fois pour que quelque chose se produise. Cela fonctionne bien sur les navigateurs de bureau (comme prévu), mais sur les navigateurs d'appareils tactiles, il effectuera un zoom avant.
Réponses:
Remarque (à partir du 04/08/2020): cette solution ne semble pas fonctionner dans iOS Safari v12 +. Je mettrai à jour cette réponse et supprimerai cette note une fois que je trouverai une solution claire qui couvre iOS Safari.
Solution uniquement CSS
Ajoutez
touch-action: manipulation
à n'importe quel élément sur lequel vous souhaitez désactiver le zoom double tap, comme avec ladisable-dbl-tap-zoom
classe suivante :Extrait des
touch-action
documents (c'est moi qui souligne):Cette valeur fonctionne sur Android et sur iOS.
la source
Je l'ai utilisé très récemment et cela fonctionne très bien sur iPad. Je n'ai pas testé sur Android ou d'autres appareils (car le site Web sera affiché sur iPad uniquement).
la source
Je sais que cela peut être vieux, mais j'ai trouvé une solution qui fonctionnait parfaitement pour moi. Pas besoin de balises méta folles et d'arrêter le zoom sur le contenu.
Je ne sais pas à 100% à quel point c'est multi-appareil, mais cela a fonctionné exactement comme je le voulais.Cela désactivera simplement la fonction de tapotement normale, puis appellera à nouveau un événement de clic standard. Cela empêche l'appareil mobile de zoomer, mais fonctionne autrement normalement.
EDIT: Cela a maintenant été testé dans le temps et fonctionne dans quelques applications en direct. Semble être 100% multi-navigateur et plateforme. Le code ci-dessus doit fonctionner comme une solution de copier-coller dans la plupart des cas, sauf si vous souhaitez un comportement personnalisé avant l'événement de clic.
la source
pointer-events: none
Je voulais juste répondre correctement à ma question car certaines personnes ne lisent pas les commentaires ci-dessous une réponse. Alors voilà:
Je n'ai pas écrit ceci, je l'ai juste modifié. J'ai trouvé la version iOS uniquement ici: https://gist.github.com/2047491 (merci Kablam)
la source
CSS pour désactiver globalement le zoom double-tap (sur n'importe quel élément):
Merci Ross, ma réponse étend la sienne: https://stackoverflow.com/a/53236027/9986657
la source
document.getElementById('root').addEventListener('click', () => {})
Si vous avez besoin d'une version qui fonctionne sans jQuery , j'ai modifié la réponse de Wouter Konecny (qui a également été créée en modifiant cet essentiel par Johan Sundström ) pour utiliser du JavaScript vanilla.
Ajoutez ensuite un gestionnaire d'événements sur
touchstart
qui appelle cette fonction:la source
myButton.addEventListener('touchstart', preventZoom);
Vous devez définir la propriété css
touch-action
surnone
comme décrit dans cette autre réponse https://stackoverflow.com/a/42288386/1128216la source
Désactivez le double tap pour zoomer sur les écrans tactiles. Internet Explorer inclus.
la source
Simple empêche le comportement par défaut de
click
,dblclick
ou lestouchend
événements désactiveront la fonctionnalité de zoom.Si vous avez déjà un rappel sur l'un de ces événements, appelez simplement un
event.preventDefault()
.la source
S'il y a quelqu'un comme moi qui rencontre ce problème avec Vue.js , ajouter simplement .prevent fera l'affaire:
@click.prevent="someAction"
la source
Cela empêchera un double tap zoom sur les éléments dans `` corps '', cela peut être changé en n'importe quel autre sélecteur
Mais cela a également empêché mon événement de clic de se déclencher lorsque j'ai cliqué plusieurs fois, j'ai donc dû lier un autre événement pour déclencher les événements sur plusieurs clics.
Sur touchstart, j'ai ajouté le code pour empêcher le zoom et déclencher un clic.
la source
Je suppose que j'ai une
<div>
zone de conteneur d'entrée avec du texte, des curseurs et des boutons, et que je souhaite empêcher les doubles-taps accidentels<div>
. Ce qui suit n'empêche pas le zoom sur la zone de saisie et ne concerne pas le double-tap et le zoom en dehors de ma<div>
zone. Il existe des variations en fonction de l'application du navigateur.J'ai juste essayé.
(1) Pour Safari sur iOS et Chrome sur Android, c'est la méthode préférée. Fonctionne sauf pour l'application Internet sur Samsung, où elle désactive les doubles-taps non pas sur le plein
<div>
, mais au moins sur les éléments qui gèrent les taps. Il retournereturn false
, à l'exception des entréestext
etrange
.(2) En option pour l'application Internet intégrée sur Android (5.1, Samsung), empêche les doubles tapotements sur
<div>
, mais empêche le zoom sur<div>
:(3) Pour Chrome sur Android 5.1, désactive du tout le double-tap, n'interdit pas le zoom et ne fait rien pour le double-tap dans les autres navigateurs. L'inhibition du double tap sur
<meta name="viewport" ...>
est irritante, car<meta name="viewport" ...>
semble être une bonne pratique.la source
Utilisation des événements tactiles CSS: aucun Supprime complètement tous les événements tactiles. Le simple fait de laisser ceci ici au cas où quelqu'un aurait également ce problème, m'a pris 2 heures pour trouver cette solution et ce n'est qu'une ligne de css. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
la source
Et c'est parti
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
la source