web-dev-qa-db-fra.com

IOS HTML désactiver double tap pour zoomer

Je conçois un site Web principalement axé sur la saisie de données. Dans l'un de mes formulaires, j'ai des boutons pour incrémenter et décrémenter rapidement la valeur numérique d'un champ de formulaire. J'utilisais

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

pour désactiver le zoom qui semblait fonctionner en utilisant l'application Firefox pour IOS. Cependant, lorsqu'un autre utilisateur l'a testé avec Safari, un clic trop rapide sur le bouton a entraîné un zoom avant sur la page, distrayant l'utilisateur et rendant impossible d'augmenter rapidement la valeur. Il semble qu'à partir de IOS 10, Apple supprimé user-scalable = no pour des raisons d'accessibilité, c'est pourquoi il ne fonctionne que dans les navigateurs tiers comme Firefox. Le plus proche que j'ai trouvé de désactiver le zoom double tap était celui-ci

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);

from https://stackoverflow.com/a/38573198 Cependant, cela désactive complètement le tapotement, ce qui, bien qu'empêche le zoom double tap, empêche également l'utilisateur d'entrer rapidement des valeurs. Existe-t-il un moyen de permettre à un bouton d'être pressé rapidement, tout en désactivant le zoom double tap?

javascripthtmliosiphoneios10
13
tchatow

La propriété CSS touch-action travaille pour moi. Testé sur iOS 11.1.

button {
    touch-action: manipulation;
}

Voir MDN pour plus d'informations: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

37
Greg Smith

J'ai fini par résoudre ce problème en utilisant le code suivant: Voir la réponse de Greg ci-dessus

$(document).click(function(event) {
    element = document.elementFromPoint(event.clientX, event.clientY);
    if(document.getElementById("div_excluded_from_doubletap").contains(element)) {
        event.preventDefault();
        clickFunction(element);
    }
});
2
tchatow