Désactiver le zoom pincé dans webkit (ou electron)
Est - il possible de désactiver le zoom par pincement dans une applicationelectron ?
Je ne peux pas le faire fonctionner à l'intérieur de la vue web avec des méthodes javascript normales comme décrit ici: https://stackoverflow.com/a/23510108/665261
Il semble que le drapeau --disable-pinch soit non supporté par electron .
J'ai expérimenté diverses méthodes en utilisant:
-
event.preventDefault()sur javascripttouchmove/mousemoveévénements -
meta viewportbalises HTML -
-webkit-text-size-adjustdans CSS - drapeaux/config pour les électrons
Est-il une méthode pour webkit en général, ou électron, en particulier?
7 réponses
Mise à jour 2:
Utilisez webFrame.setZoomLevelLimits (v0.31.1+) dans processus de rendu (différences entre le processus principal et le processus de rendu). Parce que le zoom intelligent sur mac fonctionne toujours avec le document.addEventListener.
Exemple require('electron').webFrame.setZoomLevelLimits(1, 1)
Mise à JOUR:
deltaY propriété pour pincer zoom a float valeur, mais l'événement de défilement normal retour int valeur. Maintenant la solution n'a aucun problème avec ctrl clé.
document.addEventListener('mousewheel', function(e) {
if(e.deltaY % 1 !== 0) {
e.preventDefault();
}
});
En utilisant Chromium monitorEvents(document) j'ai trouvé que c'est responsable de cet événement mousewheel. Je ne sais pas, pourquoi mousewheel déclenché avec un zoom pincé.
Prochaine étape, trouvez la différence entre le défilement normal et le zoom pincé.
Pincer le zoom a un attribut e.ctrlKey = true, et l'événement de défilement normal a e.ctrlKey = false. Mais si vous maintenez la touche ctrl enfoncée et faites défiler une page, e.ctrlKey égal true.
Je ne pouvais pas trouver une meilleure solution. :(
document.addEventListener('mousewheel', function(e) {
if(e.ctrlKey) {
e.preventDefault();
}
});
Il semble très difficile pour le navigateur de bureau pour empêcher le zoom pincée.
Voici quelques idées cependant!
1) en utilisant quelques gestes javascript comme hammer.js, détecter l'événement de pincement et essayer de l'empêcher en utilisant E. preventDefault
Ou
2) concevez tout en utilisant " % "en css, ou utilisez des unités plus récentes comme" vm " etc, (si possible). De cette façon, même la page sera agrandie, mais le contenu restera le même pour n'importe quel niveau de zoom.
Tout le meilleur!
J'ai cherché si longtemps et dur pour une solution simple à ce problème, en vain...mais plus tard, j'ai découvert un plugin appelé fullpage.js qui était capable d'empêcher le zoom pincé tout en permettant des gestes tactiles. Grâce au processus d'élimination js / css, j'ai découvert une solution très simple:
touch-action: none;
L'ajout de ceci à mon élément Pleine page a réussi à empêcher le zoom par pincement, mais m'a permis de mettre à l'échelle des objets fabricjs avec pincement. Hourra !
var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');
Solution trouvée en mélangeant ces deux liens:
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
Y a-t-il une raison pour laquelle vous ne pouvez pas utiliser:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Mettez cela dans l'en-tête et cela empêche les périphériques de zoomer.
La balise Meta aurait dû fonctionner. Essayez d'utiliser l'échelle minimale = 1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
Et si cela ne fonctionne pas, ajoutez à la fois l'échelle minimale et maximale
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
P.S.: il désactivera le zoom sur les téléphones mobiles uniquement.
J'ai eu la solution la plus facile pour cela, dans l'index.html ou fichier similaire pour votre projet, dans la balise script, inclure electron et configurer le niveau de zoom comme ci-dessous,
<script>
const electron = require('electron'); // Include electron
electron.webFrame.setZoomLevelLimits(1, 1); // Set min max zoom level as 1
const { ipcRenderer } = electron;
...
</script>
Cela fonctionne parfaitement sur tous les appareils. L'approche de balise META viewport ne fonctionne pas bien sur le bureau, ne résout que le problème sur les appareils mobiles.