wake-up-neo.com

Pinch-Zoom in Webkit (oder Elektron) deaktivieren

Gibt es eine Möglichkeit, den Pinch-Zoom in einer electron app zu deaktivieren?

Ich kann es nicht in der Web-Ansicht mit normalen Javascript-Methoden wie hier beschrieben ausführen: https://stackoverflow.com/a/23510108/665261

Es scheint, dass das --disable-pinch-Flag nicht von Elektron unterstützt wird.

Ich habe mit verschiedenen Methoden experimentiert:

  1. event.preventDefault() bei Javascript touchmove/mousemove-Ereignissen
  2. meta viewport-Tags in HTML
  3. -webkit-text-size-adjust in CSS
  4. flags/config für Elektron

Gibt es eine Methode für Webkit im Allgemeinen oder Elektron im Besonderen?

javascripthtmlcsswebkitelectron
37
Billy Moon

UPDATE 2:

Verwenden Sie webFrame.setZoomLevelLimits (v0.31.1 +) im render-Prozess ( Unterschiede zwischen Hauptprozess und Renderer-Prozess ). Weil Smart Zoom auf Mac weiterhin mit document.addEventListener funktioniert.

Beispiel require('electron').webFrame.setZoomLevelLimits(1, 1)

UPDATE:

Die deltaY-Eigenschaft für den Pinch-Zoom hat einen float-Wert, der normale Scroll-Ereignis gibt jedoch einen int-Wert zurück. Jetzt hat die Lösung kein Problem mit der Strg-Taste.

Demo 2.

document.addEventListener('mousewheel', function(e) {
  if(e.deltaY % 1 !== 0) {
    e.preventDefault();
  }
});

Ich habe festgestellt, dass Chromium monitorEvents(document) für dieses Ereignis mousewheel verantwortlich ist. Ich weiß nicht, warum mousewheel mit Pinch-Zoom ausgelöst wurde . Im nächsten Schritt finden Sie den Unterschied zwischen normalem Bildlauf und Pinch-Zoom.

Pinch-Zoom hat ein Attribut e.ctrlKey = true und ein normales Bildlaufereignis hat e.ctrlKey = false. Wenn Sie jedoch die Taste ctrl gedrückt halten und eine Seite scrollen, ist e.ctrlKey gleich true.

Ich konnte keine bessere Lösung finden. :(

Demo

document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});
24
artanik

Es scheint sehr schwierig für den Desktop-Browser zu sein, den Zoom-Zoom zu verhindern.

Hier sind einige Ideen!

1) Durch Verwendung einiger Gesten wie hammer.js erkennen Sie das Pinch-Ereignis und versuchen es mit e.preventDefault zu verhindern

OR

2) Entwerfen Sie alles mit "%" in css oder verwenden Sie neuere Einheiten wie "vm" usw. (falls möglich). Auf diese Weise wird eine gerade Seite vergrößert, der Inhalt bleibt jedoch für jede Zoomstufe gleich.

Alles Gute!

3
Sandeep

Ich suchte so lange und hart nach einer einfachen Lösung für dieses Problem ohne Erfolg ... aber später entdeckte ich ein Plugin namens fullpage.js, das Pinz-Zoom verhindern konnte und trotzdem Gesten gestattete. Durch den Prozess der Beseitigung von js/css habe ich eine sehr einfache Lösung gefunden:

touch-action: none;

Das Hinzufügen zu meinem vollständigen Seitenelement verhinderte erfolgreich den Zoom-Zoom, erlaubte mir jedoch, Fabricjs-Objekte mit Quetschungen zu skalieren. Hurra!

1
J. Barca
var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

Lösung durch Mischen dieser beiden Links gefunden:

1 - https://github.com/electron/electron/issues/8793#issuecomment-289791853

2 - https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md

1
Carlos Oliveira

meta-Tag hätte funktionieren sollen. Versuchen Sie es mit der Minimum-Skala = 1.0 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

Und wenn es auch nicht funktioniert, fügen Sie sowohl die minimale als auch die maximale Skala hinzu

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

P.S. : Das Zoomen wird nur bei Mobiltelefonen deaktiviert.

0
Kapil Garg

Ich habe die einfachste Lösung dafür in der Datei index.html oder einer ähnlichen Datei für Ihr Projekt gefunden.

<script>
const electron = require('electron'); // Include electron
electron.webFrame.setZoomLevelLimits(1, 1); // Set min max zoom level as 1
const { ipcRenderer } = electron;
...
</script>

Dies funktioniert auf allen Geräten einwandfrei .. _ Der Viewport-Meta-Tag-Ansatz funktioniert auf Desktop-Computern nicht gut, nur das Problem auf mobilen Geräten wird behoben.

0
Krishna Modi

Gibt es einen Grund, warum Sie nicht verwenden können:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Setzen Sie das in die Kopfzeile und es verhindert, dass Geräte zoomen.

0
James.carney91