it-swarm.com.de

Javascript - Wie kann man Pinch-Zoom und Multi-Touch-Input-Angriffe stoppen?

Die aktuelle stabile Version von Google Chrome hat den manuellen Zoom blockiert, was in älteren Versionen mit folgenden Einstellungen möglich war:

chrome://flags/#enable-pinch

Ich bekomme Angriffe in meinem Kiosk durch zufällige Pinch-Zoom-/Multi-Touch-Eingaben.

Wie kann man JavaScript zum Deaktivieren von Pinch-Zoom/Multi-Touch auswählen? (um den Kiosk zu schützen)

Ich habe versucht zu folgen, aber nichts hindert den Kiosk daran, Pinch-Zoom-Angriffe zu ignorieren.

$(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; 
  });

});

BEARBEITEN:

chrome://flags/#enable-pinch - funktioniert in Google Chrome nie mehr. Google hätte es nicht entfernen sollen und die Community hätte protestieren sollen, um es nicht entfernen zu lassen.

14
YumYumYum

Sie sollten können das Heranzoomen von Benutzern verhindern, indem Sie dieses Meta-Tag zu Ihrem <head> Hinzufügen:

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

Meine Version von Google Chrome Version 51.0.2704.84 (64-bit)) berücksichtigt diese Einstellung, wenn ich sie mithilfe der Touch-Emulation in den Entwicklertools teste.

Zum Beispiel:

  1. Eine Website, die durch Kneifen zoombar ist: Hacker News

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

  1. Eine Website, die nicht durch Kneifen zoombar ist: Designer News

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

Ich möchte kommentieren, dass das Vergrößern und Verkleinern Ihrer Benutzer nicht als “Angriff” betrachtet werden sollte. Das Hineinzoomen ist sehr wichtig für Menschen mit schlechten Augen.

Wenn Sie das natürliche Zoomverhalten deaktivieren, sollten Sie die volle Verantwortung für die Lesbarkeit Ihrer Webseite übernehmen.

6
user3297291

Ich weiß nicht, ob dies als vollständige Antwort gilt, aber ich kann keinen Kommentar abgeben. Eine Möglichkeit besteht darin, einen Handler für Berührungsereignisse window.addEventListener("touchstart", touchHandler, false); festzulegen und anschließend eine touchHandler-Funktion zu schreiben

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

Hier finden Sie weitere Informationen zum Entwickeln mit Berührungsereignissen https://mobiforge.com/design-development/html5-mobile-web-touch-events Sie müssen den Handler auf ein anderes Berührungsereignis einstellen um das vom Browser abhängige Standard-Pinch-Zoom-Verhalten zu verhindern. Eine Liste finden Sie hier: http://www.quirksmode.org/mobile/default.html

Ich weiß nicht, ob das bei Ihnen funktioniert, aber es könnte einen Versuch wert sein.

25
zevnicsca

Wenn Sie den Kiosk auf einem PC ausführen, gibt es keine Möglichkeit, dies programmgesteuert über eine Webanwendung auszuführen.

Sie müssen die Unterstützung für Multi-Touch-Gesten entweder in den Einstellungen Ihres Touch-Gerätetreibers oder in den Betriebssystemeinstellungen deaktivieren. Hier ist ein gutes Beispiel - Windows 7-Touchscreen - Deaktivieren der Multitouch-Geste funktioniert nicht

5
Roman Pletnev

hallo, hier ist mein Vorschlag. Versuchen Sie, es sinnvoll zu machen, wenn es mehrere Eingaben gibt, und machen Sie die Mittelwerte für den exaple Finger aus (10,20). 15) .Leider konnte ich nur Ideen vorschlagen und nicht danke Code

2
Kai Hayati

Fankys Antwort funktioniert für mich (Opera im Kiosk-Modus), außer dass ich touchmove anstelle von touchstart verwende. Und damit die Schieberegler weiterhin funktionieren, fügen Sie einen bestimmten Listener hinzu, wie von Fanky angegeben.

1
MR_1204

So verhindern Sie das Zoomen in Chrome:

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

Vielleicht bis auf ein Element

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