Deaktivieren Sie den Chrome-Pinch-Zoom für die Verwendung im Kiosk

Wir hatten ein ähnliches problem, es manifestiert sich als browser Zoomen aber javascript-Empfang kein touch-event (oder manchmal nur einen einzigen Punkt vor dem Zoomen beginnt).

Wir haben festgestellt, dass diese möglichen (aber vielleicht nicht die langfristige) Lösungen:

1. Deaktivieren Sie die pinch - /swipe-Funktionen bei der Verwendung von kiosk-Modus

Wenn diese Kommandozeilen-Einstellungen bleiben in Chrome, können Sie Folgendes tun:

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0

• --disable-Klemmen - deaktiviert die pinch-to-zoom-Funktionalität
• --overscroll-Geschichte-navigation=0 - deaktiviert die swipe-to-navigate-Funktionalität

2. Deaktivieren Sie die pinch-Zoomen Sie über die Chrome-flags chrome://flags/#enable-Prise

Navigieren Sie zu der URL chrome://flags/#enable-pinch in Ihrem browser und deaktivieren Sie die Funktion.

Die pinch-zoom-Funktion ist derzeit noch experimentell ist aber standardmäßig aktiviert, was wahrscheinlich bedeutet, es wird die Kraft aktiviert, die in zukünftigen Versionen. Wenn Sie im kiosk-Modus (und die Ansteuerung der hardware/software), könnten Sie wahrscheinlich schalten Sie diese Einstellung nach der installation und dann verhindern, dass Chrome-updates gehen weiter.

Gibt es schon einen Fahrplan, ticket für das entfernen dieser Einstellung auf Chrom Ausgabe 304869.

Die Tatsache, dass der browser reagiert vor javascript verhindern kann, ist es definitiv ein bug und wurde protokolliert am Chromium bug tracker. Hoffentlich wird es behoben werden, bevor die Funktion dauerhaft aktiviert oder die Finger gekreuzt, lasse Sie es als eine Einstellung.

3. Deaktivieren Sie alle berührt, whitelist für die Elemente und Ereignisse passend zu Ihrer app

In allen tests, die wir durchgeführt haben, hinzufügen preventDefault() auf das Dokument Stoppt der Zoom (und alle anderen swipe/touch-events) in Chrome:

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

Wenn Sie legen Sie Ihre touch-basierte Funktionen höhere bis in den DOM, er werde aktivieren, bevor Sie die Blasen, um das Dokument die preventDefault () - Aufruf. In Chrome ist es auch wichtig, dass die eventListenerOptions parameter, da wie von Chrom-51, eine Dokument-level-event-listener ist auf {passiv: true} standardmäßig.

Deaktiviert dies die normalen browser-Funktionen wie wischen, scrollen, obwohl, werden Sie wahrscheinlich haben, um diese selbst. Wenn es ein full-screen, non-scrollable kiosk-app, vielleicht sind diese Funktionen nicht wichtig.

InformationsquelleAutor der Antwort JimmyG

Ich beschäftige mich mit dem gleichen Problem. Ich denke, ich kann es Recht gut mit dem folgenden Ansatz

• bestimmen Sie die css-pixel-Breite des html-Elements: document.documentElement.clientWidth
• vergleichen Sie diese Messung an die bekannten pixel-Breite des kiosk-Bildschirm
• wenn das html-element wird breiter, in css-Pixel als der Bildschirm ist, in physischen Pixeln, das bedeutet, dass es skaliert
• wenn das html-element skaliert wird, gilt ein zoom auf das body-element zu kompensieren. Die Formel ist `Körper.Stil.zoom = htmlElementClientWidth /screenPhysicalPixelWidth

Diese Technik hat den vorteilhaften Nebeneffekt der automatisch die Skalierung der UI, was für die Größe des aktuellen Fensters ist, das ist hilfreich für die Entwicklung, wenn ich die Entwicklung auf einem Bildschirm, der kleiner als der Ziel-Bildschirm.

Mehr auf dem Bildschirm Pixel vs css-Pixel, und eine Diskussion darüber, wie das html-element erweitert, um den verfügbaren Platz auszufüllen bei quirksmode.org.

InformationsquelleAutor der Antwort morgancodes

html, css{
touch-action:none;
}

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

InformationsquelleAutor der Antwort phil