web-dev-qa-db-fra.com

Désactiver Chrome zoom pincé pour une utilisation dans le kiosque

Nous utilisons Chrome en mode kiosque et les utilisateurs provoquent accidentellement le zoom de l'application avec l'ajout récent de la prise en charge du zoom par pincement. Ils pensent alors qu'ils l'ont cassé et s'en vont tout simplement en quittant l'application ( et par la suite un écran tactile de 55 ") dans un état cassé.

Maintenant, la seule chose à faire est d'arrêter la propagation des événements tactiles sur 2 points. Les problèmes avec cela sont que nous ne pouvons pas faire des applications multitouch dans ce cas et si vous agissez rapidement, le navigateur réagit avant javascript. Ce qui, dans nos tests, se produit toujours par accident par les utilisateurs.

J'ai fait les balises Meta, elles ne fonctionnent pas. Honnêtement, je souhaite pouvoir désactiver chrome zoom du tout, mais je ne trouve pas de moyen de le faire.

Comment puis-je empêcher le navigateur de zoomer?

google-chromezoomkioskpinch
34
Dennis Smolek

Nous avons eu un problème similaire, il se manifeste comme le zoom du navigateur, mais javascript ne reçoit aucun événement tactile (ou parfois juste un seul point avant le début du zoom).

Nous avons trouvé ces solutions possibles (mais peut-être pas à long terme):

1. Désactivez les fonctionnalités de pincement/balayage lorsque vous utilisez le mode kiosque

Si ces paramètres de ligne de commande restent dans Chrome, vous pouvez effectuer les opérations suivantes:

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
  • - disable-pinch - désactive la fonctionnalité pincer pour zoomer
  • - overscroll-history-navigation = 0 - désactive la fonctionnalité glisser-naviguer

2. Désactivez le zoom par pincement à l'aide de Chrome drapeaux chrome: // flags/# enable-pinch

Accédez à l'URL chrome: // flags/# enable-pinch dans votre navigateur et désactivez la fonctionnalité.

La fonction de pincement du zoom est actuellement expérimentale mais activée par défaut, ce qui signifie probablement qu'elle sera activée de force dans les futures versions. Si vous êtes en mode kiosque (et contrôlez le matériel/logiciel), vous pouvez probablement basculer ce paramètre lors de l'installation et empêcher ensuite les mises à jour Chrome Chrome).

Il existe déjà une feuille de route pour supprimer ce paramètre à Chromium Issue 304869 .

Le fait que le navigateur réagisse avant que javascript ne puisse l'empêcher est définitivement un bogue et a été enregistré sur le Chromium bug tracker . Espérons que cela sera corrigé avant que la fonctionnalité ne soit activée en permanence ou que les doigts soient croisés, ils la laisseront comme paramètre.

3. Désactivez toutes les touches, liste blanche pour les éléments et événements correspondant à votre application

Dans tous les tests que nous avons menés, l'ajout de preventDefault () au document arrête le zoom (et tous les autres événements de balayage/toucher) dans Chrome:

document.addEventListener('touchstart', function(event){
    event.preventDefault();
}, {passive: false});

Si vous attachez votre fonctionnalité tactile plus haut dans le DOM, elle s'activera avant qu'elle ne se propage à l'appel preventDefault () du document. Dans Chrome il est également important d'inclure le paramètre eventListenerOptions car à partir de Chrome 51 a l'écouteur d'événements au niveau du document est défini sur {passive: true} par défaut .

Cela désactive cependant les fonctionnalités normales du navigateur telles que glisser pour faire défiler, vous devrez probablement les implémenter vous-même. S'il s'agit d'une application de kiosque plein écran et sans défilement, ces fonctionnalités ne seront peut-être pas importantes.

70
JimmyG

Juste pour que toute personne tombant sur cette page sache que le drapeau dans Chrome pour désactiver le pincement pour zoomer est maintenant:

Google Chrome/Chrome/Canary version supérieure à 50:

chrome://flags/#touch-events

Google Chrome/Chrome/Canary version moins de 50 ou anciennes versions:

chrome://flags/#enable-pinch.

9
James Lott 
html {
  touch-action:none;
}

Cela désactivera la gestion par le navigateur de tous les mouvements de panoramique et de zoom. Le geste sera toujours disponible pour une manipulation par code javascript.

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

4
phil

Je fais face au même problème. Je pense que je peux le gérer raisonnablement bien avec l'approche suivante

  • déterminer la largeur de pixel css de l'élément html: document.documentElement.clientWidth
  • comparer cette mesure à la largeur de pixel connue de l'écran du kiosque
  • si l'élément html est plus large, en pixels css que l'écran, en pixels physiques, cela signifie qu'il est mis à l'échelle
  • si l'élément html est mis à l'échelle, appliquez un zoom à l'élément body pour compenser. La formule est `body.style.zoom = htmlElementClientWidth/screenPhysicalPixelWidth

Cette technique a pour effet secondaire bénéfique de faire évoluer automatiquement l'interface utilisateur à la taille de la fenêtre actuelle, ce qui est utile pour le développement si je développe sur un écran plus petit que l'écran cible.

Plus d'informations sur les pixels d'écran par rapport aux pixels CSS, et une discussion sur la façon dont l'élément html se développe pour remplir l'espace disponible sur quirksmode.org .

3
morgancodes

Une autre solution qui fonctionne actuellement dans Chrome (54) consiste à ajouter un écouteur d'événement pour l'événement 'touchstart' Et à appeler preventDefault() en fonction de la longueur du targetTouches ou touches sur l'événement.

Cette solution empêche un pincement (n'importe quel geste à deux doigts d'ailleurs), mais offre toujours une flexibilité dans la façon dont vous souhaitez réagir à l'événement. C'est une bonne solution car elle ne vous oblige pas à désactiver complètement les événements tactiles (comme requis si vous souhaitez désactiver le pincement à l'aide des indicateurs chrome, car chrome://flags/#enable-pinch N'existe plus)) .

window.addEventListener('touchstart', function(e) {
  if (e.targetTouches.length === 2) {
    e.preventDefault();
  }
}, false);
Some text that you can't pinch zoom on Chrome (tested in 54)
2
wgardiner

À partir de la version 51.0.2704.84 m, chrome: // flags/# touch-events désactive tous les événements tactiles non seulement la fonction de pincement. Pour info. Espérons que Google renverra cette fonctionnalité dans la prochaine version.

0
wendecat