Deaktivieren Sie die pinch-zoom-in webkit (oder Elektron)

Gibt es eine Möglichkeit zum deaktivieren der pinch-zoom in einem Elektron app?

Ich nicht bekommen kann es arbeiten, die aus dem inneren der web-Ansicht mit normalen javascript-Methoden, wie hier beschrieben: https://stackoverflow.com/a/23510108/665261

Scheint es, die --disable-pinch flag nicht unterstützt von Elektron.

Habe ich experimentierte mit verschiedene Methoden verwenden:

event.preventDefault() auf javascript touchmove/mousemove Veranstaltungen
meta viewport - tags im HTML -
-webkit-text-size-adjust im CSS
flags/config für Elektron

Gibt es eine Methode entweder für webkit-im Allgemeinen, oder Elektron im besonderen?

InformationsquelleAutor Billy Moon | 2015-04-28

24

UPDATE 2:

Verwenden webFrame.setZoomLevelLimits (v0.31.1+) in render-Prozess (Unterschiede Zwischen Haupt-Prozess-und Renderer-Prozess). Da smart-zoom auf dem mac immer noch die Arbeit mit dem Dokument.addEventListener.

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

UPDATE:

deltaY Eigenschaft für pinch-zoom hat float Wert, aber die normalen scroll-Ereignis zurück int Wert. Nun die Lösung hat kein problem mit der Strg-Taste.

Demo 2.
```
document.addEventListener('mousewheel', function(e) {
  if(e.deltaY % 1 !== 0) {
    e.preventDefault();
  }
});
```
Mit Chrom monitorEvents(document) ich gefunden, der ist verantwortlich für dieses Ereignis mousewheel. Ich weiß nicht, warum mousewheel ausgelöst, mit pinch-zoom.
Im nächsten Schritt, finden Unterschied zwischen normalen Blättern und pinch-zoom.

Pinch-zoom hat ein Attribut e.ctrlKey = true, und die normale scroll-Ereignis hat e.ctrlKey = false. Aber wenn Sie halten Sie ctrl - Taste und Blättern Sie eine Seite e.ctrlKey gleich true.

Konnte ich nicht finden eine bessere Lösung. 🙁

Demo
```
document.addEventListener('mousewheel', function(e) {
  if(e.ctrlKey) {
    e.preventDefault();
  }
});
```
- Durch die Kombination mit einem keydown/keyup-Ereignis zu prüfen, wenn ctrlKey wird durch den eigentlichen Schlüssel mit einem globalen flag könnte möglicherweise lösen die Differenzierung problem.
InformationsquelleAutor artanik
3

Scheint es sehr schwierig für desktop-browser zu verhindern, pinch-zoom.

Hier sind einige Ideen, aber!

1) mit einigen gesten javascript wie hammer.js, erkennen Prise Ereignis und versuchen zu verhindern, dass es mit e.preventDefault

ODER

2) Design alles, was mit "%" in css, oder verwenden Sie neuere Geräte wie "vm" etc, (wenn möglich). Auf diese Weise, auch wird die Seite gezoomt werden, aber die Inhalte bleiben die gleichen für jede zoom-Stufe.

Alle die besten!!!
- vielen Dank für die Anregungen. Ich habe versucht, beide Lösungen. Hammer, genial, wie es ist, scheint nicht zu helfen mit diesem. Es scheint, hinzufügen recognisers als eine Ebene auf der Oberseite der Ereignisse, ich glaube, ich brauche etwas, das hilft, Zugang zu mehr low-level-Funktionalität. Der zweite schien keine Wirkung haben, wenn ich die Schriftgröße in Prozent-Regel, die auf Körper -, html -, Absatz etc...
InformationsquelleAutor Sandeep
1

Suchte ich so lange und hart für eine einfache Lösung, um dieses problem ohne Erfolg...aber später entdeckte ich ein plugin namens fullpage.js das war in der Lage zu verhindern, pinch-zoom, während immer noch so dass touch-gesten. Durch den Prozess der js/css-Beseitigung, entdeckte ich eine sehr einfache Lösung:
```
touch-action: none;
```
Fügen Sie diese zu meiner vollen Seite element erfolgreich verhindert, pinch-zoom, aber erlaubt mir zu skalieren fabricjs Objekte mit zwicken. Hurra !
- thnks für die, ich war beleve in einfachen Lösung
InformationsquelleAutor J. Barca
1
```
var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');
```
Lösung gefunden, durch die Vermischung dieser beiden links:

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

InformationsquelleAutor Carlos Oliveira
0

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, dass in der Kopfzeile und es hält die Geräte von Zoom.
- scheint nicht zu funktionieren auf meinem mac mit chrome
- Oh. Das ist mein trick, wenn ich deaktivieren möchten, Zoomen auf dem Handy. Hatte nie sorgen zu machen über die Deaktivierung der Zoom, wenn ich auf einen desktop.
InformationsquelleAutor James.carney91
0

meta-tag sollte gearbeitet haben. Versuchen Sie, die minimum-scale=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, dann fügen Sie die minimale und maximale Skalierung
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
P. S. : Es deaktiviert das Zoomen auf Handys nur.
- Es funktioniert wahrscheinlich auch für mobile, ich will eine Lösung, die auch funktioniert für desktop.
InformationsquelleAutor Kapil Garg
0

Bekam ich die einfachste Lösung für dieses, in der index.html oder eine ähnliche Datei für Ihr Projekt, innerhalb des script-Tags, Elektron und konfigurieren von zoom-Stufe wie folgt
```
<script>
const electron = require('electron'); //Include electron
electron.webFrame.setZoomLevelLimits(1, 1); //Set min max zoom level as 1
const { ipcRenderer } = electron;
...
</script>
```
Diese funktioniert einwandfrei auf allen Geräten.
Der viewport meta-tag-Ansatz funktioniert nicht gut auf dem desktop, nur behebt Problem auf mobilen Geräten.

InformationsquelleAutor Krishna Modi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.