web-dev-qa-db-fra.com

Désactiver le zoom de pincement dans le kit Web (ou électronique)

Est-il possible de désactiver le zoom par pincement dans une application electron ?

Je ne parviens pas à le faire fonctionner à partir de la vue Web avec les méthodes javascript normales décrites ci-dessous: https://stackoverflow.com/a/23510108/665261

Il semble que le drapeau --disable-pinch soit non supporté par electron .

J'ai expérimenté différentes méthodes en utilisant:

  1. event.preventDefault() sur les événements javascript touchmove/mousemove
  2. meta viewport balises en HTML
  3. -webkit-text-size-adjust en CSS
  4. drapeaux/config pour electron

Existe-t-il une méthode pour webkit en général ou électron en particulier?

javascripthtmlcsswebkitelectron
37
Billy Moon

UPDATE 2:

Utilisez webFrame.setZoomLevelLimits (v0.31.1 +) dans render process ( Différences entre le processus principal et le processus de rendu ). Parce que le zoom intelligent sur mac fonctionne toujours avec document.addEventListener.

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

METTRE À JOUR:

La propriété deltaY du zoom sur pincement a la valeur float, mais l'événement de défilement normal renvoie la valeur int. Maintenant, la solution n'a pas de problème avec la touche Ctrl.

Démo 2.

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

Utilisation de Chromium monitorEvents(document) J'ai constaté que l'événement mousewheel était à l'origine de cet événement. Je ne sais pas pourquoi mousewheel a été déclenché avec le zoom par pincement . Prochaine étape: trouvez la différence entre le défilement normal et le zoom par pincement.

Le zoom par pincement a l'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 est égal à true.

Je ne pouvais pas trouver une meilleure solution. :(

Démo

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

Il semble très difficile pour le navigateur de bureau d’empêcher le zoom par pincement.

Voici quelques idées cependant!

1) En utilisant des gestes javascript comme hammer.js , détectez l’événement Pinch et essayez de l’empêcher en utilisant e.preventDefault

OR

2) Concevez tout en utilisant "%" dans 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 tous les niveaux de zoom.

Bonne chance!

3
Sandeep

J'ai cherché si longtemps et si fort une solution simple à ce problème sans résultat ... mais plus tard, j'ai découvert un plugin appelé fullpage.js qui était capable d'empêcher le zoom par pincement tout en permettant les gestes tactiles. Au cours du processus d’élimination de js/css, j’ai découvert une solution très simple:

touch-action: none;

Ajouter ceci à la totalité de ma page a empêché le zoom par pincement mais m'a permis de redimensionner les objets Fabricjs avec pincement. Hourra!

1
J. Barca
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

1
Carlos Oliveira

la méta-tag aurait dû fonctionner. Essayez d'utiliser le minimum-scale = 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 non plus, ajoutez à la fois les échelles 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. : Cela désactivera le zoom sur les téléphones mobiles uniquement.

0
Kapil Garg

J'ai trouvé le correctif le plus simple pour cela, dans l'index.html ou un fichier similaire pour votre projet, dans la balise de 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 la balise méta viewport ne fonctionne pas bien sur le bureau, mais seulement sur les appareils mobiles.

0
Krishna Modi

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 empêche les périphériques de zoomer.

0
James.carney91