web-dev-qa-db-fra.com

Javascript - Comment arrêter les attaques par zoom avec pincement, saisie tactile?

La version actuelle de Google Chrome stable a cessé de bloquer manuellement le zoom par pincement, ce qui était possible dans les versions antérieures avec les paramètres suivants:

chrome://flags/#enable-pinch

Je reçois des attaques dans mon kiosque à partir de certaines entrées tactiles au zoom/pincement aléatoires.

Comment dire à JavaScript de désactiver le zoom par pincement/multi-touch? (pour protéger le kiosque)

J'ai essayé de suivre mais rien n'empêche le kiosque d'ignorer les attaques par zoom avec pincement.

$(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false; 
  });

});

MODIFIER:

chrome://flags/#enable-pinch - ne fonctionne plus jamais dans Google Chrome. Google n'aurait pas dû l'enlever et la communauté aurait dû protester pour ne pas le faire enlever.

javascriptjquerywindowsgoogle-chromechromium
14
YumYumYum

Vous devriez pouvoir empêcher les utilisateurs d'effectuer un zoom avant en ajoutant cette balise META à votre <head>:

<meta name="viewport" content="width=device-width, user-scalable=no">

Ma version de Google Chrome Version 51.0.2704.84 (64-bit), respecte ce paramètre lorsque je le teste à l'aide de son émulation tactile dans les outils de développement.

Par exemple:

  1. Un site Web qui est peut être zoomé en pinçant: Hacker News

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  1. Un site Web qui n'est pas peut être zoomé en pinçant: Designer News

<meta name="viewport" content="width=device-width, user-scalable=no">

Je voudrais dire que permettre à vos utilisateurs d’agrandir ou de réduire les zooms ne devrait pas être considéré comme une attaque "attaque" Il est très important d'effectuer un zoom avant pour les malvoyants (ou les malvoyants, je ne suis pas sûr de ce que serait le terme anglais correct et poli).

Si vous désactivez le comportement de zoom naturel, vous devez assumer l'entière responsabilité de la lisibilité de votre page Web.

3
user3297291

Je ne sais pas si cela compte comme une réponse complète, mais je n'ai pas le représentant à commenter .. Une option consiste à définir un gestionnaire d'événements tactiles window.addEventListener("touchstart", touchHandler, false);, puis d'écrire une fonction touchHandler 

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

Voici quelques informations supplémentaires sur le développement d'événements tactiles https://mobiforge.com/design-development/html5-mobile-web-touch-events événement tactile différent pour empêcher le comportement du zoom par pincement par défaut en fonction du navigateur. Une liste peut être trouvée ici: http://www.quirksmode.org/mobile/default.html

Je ne sais pas si cela fonctionnera pour vous mais cela pourrait valoir la peine d'essayer.

21
zevnicsca

En supposant que vous exécutiez la borne sur un PC, il n’ya aucun moyen de le faire par programme à partir d’une application Web.

Vous devez désactiver la prise en charge des gestes tactiles multipoint soit dans les paramètres de votre pilote de périphérique tactile, soit dans ceux du système d'exploitation. Voici un bon exemple - Écran tactile Windows 7 - Désactivation du geste multi-touch ne fonctionne pas

5
Roman Pletnev

salut voici ma suggestion .Essayez de donner un sens s’il ya plusieurs entrées et les faire en moyenne pour exaple doigt on est à (10,20) et doigt deux est à (20,10) il est en moyenne 15) .Désolé, je ne pouvais que suggérer des idées et non du code, merci

2
Kai Hayati

Voici comment empêcher le zoom dans Chrome:

document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});

Peut-être sauf un élément

document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);
0
Fanky