web-dev-qa-db-de.com

Deaktivieren Sie Chrome Pinch Zoom zur Verwendung in Kiosk

Wir verwenden Chrome im Kiosk-Modus und Benutzer veranlassen versehentlich, dass die Anwendung mit der kürzlich hinzugefügten Pinch-Zoom-Unterstützung gezoomt wird. Sie glauben dann, dass sie es kaputt gemacht haben, und verlassen die Anwendung einfach. ( und anschließend ein 55 "Touchscreen) in einem defekten Zustand.

Jetzt konnte nur noch die Ereignisausbreitung für Berührungsereignisse über 2 Punkte gestoppt werden. In diesem Fall können wir keine Multitouch-Apps ausführen. Wenn Sie schnell reagieren, reagiert der Browser vor dem Aktivieren von Javascript. Was in unseren Tests immer noch durch Unfälle von Anwendern passiert.

Ich habe die Meta-Tags gemacht, sie funktionieren nicht. Ehrlich gesagt, ich wünschte, ich könnte chrome zoomen überhaupt deaktivieren, aber ich kann keinen Weg finden, das zu tun.

Wie kann ich verhindern, dass der Browser zoomt?

google-chromezoomkioskpinch
34
Dennis Smolek

Wir hatten ein ähnliches Problem, das sich darin manifestiert, dass der Browser zoomt, aber Javascript kein Berührungsereignis empfängt (oder manchmal nur einen einzelnen Punkt vor Beginn des Zoomens).

Wir haben diese möglichen (aber möglicherweise nicht langfristigen) Lösungen gefunden:

1. Deaktivieren Sie die Pinch/Swipe-Funktionen, wenn Sie den Kiosk-Modus verwenden

Wenn diese Befehlszeileneinstellungen in Chrome erhalten bleiben, können Sie Folgendes tun:

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
  • - Prise deaktivieren - Deaktiviert die Prise-zu-Zoom-Funktion
  • - Overscroll-History-Navigation = 0 - Deaktiviert die Funktion zum Wischen zum Navigieren

2. Deaktivieren Sie das Pinch Zoom mit den Chrome Flags chrome: // Flags/# enable-pinch

Navigieren Sie in Ihrem Browser zur URL chrome: // flags/# enable-pinch und deaktivieren Sie die Funktion.

Die Pinch-Zoom-Funktion ist derzeit experimentell, aber standardmäßig aktiviert, was wahrscheinlich bedeutet, dass sie in zukünftigen Versionen erzwungen aktiviert wird. Wenn Sie sich im Kiosk-Modus befinden (und die Hardware/Software steuern), können Sie diese Einstellung möglicherweise bei der Installation umschalten und dann verhindern, dass Chrome) aktualisiert wird.

Es gibt bereits ein Roadmap-Ticket zum Entfernen dieser Einstellung unter Chromium Issue 304869 .

Die Tatsache, dass der Browser reagiert, bevor Javascript dies verhindern kann, ist definitiv ein Fehler und wurde im Chromium Bug Tracker protokolliert. Hoffentlich wird es behoben, bevor die Funktion dauerhaft aktiviert ist oder wenn sie die Daumen drücken, wird sie als Einstellung beibehalten.

3. Alle Berührungen deaktivieren, Whitelist für Elemente und Ereignisse, die Ihrer App entsprechen

In allen Tests, die wir durchgeführt haben, stoppt das Hinzufügen von preventDefault () zum Dokument das Zoomen (und alle anderen Wisch-/Berührungsereignisse) in Chrome:

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

Wenn Sie Ihre berührungsbasierte Funktionalität weiter oben im DOM anhängen, wird sie aktiviert, bevor sie in den Aufruf preventDefault () des Dokuments übergeht. In Chrome ist es auch wichtig, den Parameter eventListenerOptions einzuschließen, da ab Chrome 51 a Ereignis-Listener auf Dokumentebene auf {passive: true} Standardmäßig .

Dadurch werden normale Browserfunktionen wie Swipe zum Scrollen deaktiviert. Diese müssten Sie wahrscheinlich selbst implementieren. Wenn es sich um eine nicht scrollbare Kiosk-Vollbild-App handelt, sind diese Funktionen möglicherweise nicht wichtig.

70
JimmyG

Nur damit jeder, der über diese Seite stolpert, weiß, dass das Flag in Chrome zum Deaktivieren von "Prise to Zoom" jetzt wie folgt lautet:

Google Chrome/Chrom/Canary-Version über 50:

chrome://flags/#touch-events

Google Chrome/Chromium/Canary-Version weniger als 50 oder ältere Versionen:

chrome://flags/#enable-pinch.

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

Dadurch wird die Browser-Verarbeitung aller Schwenk- und Zoombewegungen deaktiviert. Die Geste kann weiterhin mit JavaScript-Code verarbeitet werden.

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

4
phil

Ich beschäftige mich mit dem gleichen Problem. Ich denke, ich kann mit dem folgenden Ansatz einigermaßen gut damit umgehen

  • bestimmen Sie die CSS-Pixelbreite des HTML-Elements: document.documentElement.clientWidth
  • vergleichen Sie diese Messung mit der bekannten Pixelbreite des Kioskbildschirms
  • wenn das HTML-Element breiter ist als der Bildschirm in physischen Pixeln, bedeutet dies, dass es skaliert ist
  • wenn das HTML-Element skaliert ist, wenden Sie einen Zoom auf das Body-Element an, um dies zu kompensieren. Die Formel lautet `body.style.zoom = htmlElementClientWidth/screenPhysicalPixelWidth

Diese Technik hat den vorteilhaften Nebeneffekt, dass die Benutzeroberfläche automatisch auf die Größe des aktuellen Fensters skaliert wird. Dies ist hilfreich für die Entwicklung, wenn ich auf einem Bildschirm entwickle, der kleiner als der Zielbildschirm ist.

Weitere Informationen zu Bildschirmpixeln und CSS-Pixeln sowie eine Erläuterung, wie das HTML-Element erweitert wird, um den verfügbaren Speicherplatz unter quirksmode.org auszufüllen.

3
morgancodes

Eine andere Lösung, die derzeit in Chrome (54)) funktioniert, besteht darin, einen Ereignis-Listener für das Ereignis 'touchstart' Hinzuzufügen und preventDefault() basierend auf der Länge des targetTouches oder touches für das Ereignis.

Diese Lösung verhindert ein Einklemmen (für diese Angelegenheit jede Geste mit zwei Fingern), bietet aber dennoch Flexibilität, wie Sie auf das Ereignis reagieren möchten. Es ist eine gute Lösung, da Sie keine Berührungsereignisse insgesamt deaktivieren müssen (wie erforderlich, wenn Sie das Kneifen mit den chrome flags deaktivieren möchten, da chrome://flags/#enable-pinch Nicht mehr existiert). .

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

Ab Version 51.0.2704.84 m deaktiviert chrome: // flags/# touch-events alle Touch-Events, nicht nur die Pinch-Funktion. Zu Ihrer Information. Google wird diese Funktionalität hoffentlich in einer zukünftigen Version zurückgeben.

0
wendecat