javascript - mano - Deshabilitar el zoom de pellizco en webkit(o electrón)

custom cursor css

Question

¿Hay alguna forma de desactivar el zoom de pellizco en una aplicación de electron ?

No puedo hacer que funcione desde dentro de la vista web con los métodos normales de JavaScript como se describe aquí: https://stackoverflow.com/a/23510108/665261

Parece que el indicador --disable-pinch no es compatible con el electrón .

He experimentado con varios métodos usando:

1. event.preventDefault() en javascript touchmove/mousemove events
2. etiquetas meta viewport en HTML
3. -webkit-text-size-adjust en CSS
4. flags / config para electrón

¿Hay algún método para webkit en general, o electron en particular?

Answer 1

¿Hay alguna razón por la cual no puedes usar:

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

Ponlo en el encabezado y evita que los dispositivos se acerquen.

Answer 2

Busqué por mucho tiempo una solución simple a este problema sin ningún resultado ... pero más tarde descubrí un complemento llamado fullpage.js que podía evitar el pellizco mientras permitía gestos táctiles. A través del proceso de eliminación de js / css, descubrí una solución muy simple:

touch-action: none;

Agregar esto a mi elemento de página completa prevenía con éxito el zoom pellizco, pero me permitía escalar los objetos fabricjs con pellizcos. ¡Hurra!

Answer 3

Obtuve la solución más fácil para esto, en el archivo index.html o similar para su proyecto, dentro de la etiqueta del script, incluyo el electrón y configuro el nivel de zoom como se muestra a continuación,

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

Esto funciona perfectamente bien en todos los dispositivos. El enfoque de la metaetiqueta de la ventana gráfica no funciona bien en el escritorio, solo soluciona el problema en los dispositivos móviles.

Answer 4

Parece muy difícil para el navegador de escritorio evitar el zoom pellizco.

¡Aquí hay algunas ideas!

1) Mediante el uso de algunos gestos javascript como hammer.js , detectar el evento Pinch e intentar evitarlo con e.preventDefault

O

2) Diseña todo usando "%" en css, o usa unidades más nuevas como "vm", etc. (si es posible). De esta forma, incluso se ampliará la página, pero el contenido permanecerá igual para cualquier nivel de zoom.

¡Todo lo mejor!

Answer 5

metaetiqueta debería haber funcionado. Intenta usar la escala mínima = 1.0

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

Y si tampoco funciona, agregue las escalas mínima y máxima

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

PD: Deshabilitará el acercamiento solo en teléfonos celulares.

Answer 6

ACTUALIZACIÓN 2:

Utilice webFrame.setZoomLevelLimits (v0.31.1 +) en el proceso de representación ( Diferencias entre el proceso principal y el proceso de representación ). Debido a que el zoom inteligente en Mac aún funciona con document.addEventListener.

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

ACTUALIZAR:

deltaY propiedad deltaY para zoom de pellizco tiene valor float , pero el evento de desplazamiento normal devuelve el valor int . Ahora la solución no tiene problema con la tecla ctrl.

Demo 2 .

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

Usando Chromium monitorEvents(document) encontré que es responsable de este evento mousewheel . No sé, por qué la mousewheel activó con un zoom pellizco. El siguiente paso, encuentra la diferencia entre el desplazamiento normal y el zoom de pellizco.

El zoom de pellizco tiene un atributo e.ctrlKey = true , y el evento de desplazamiento normal tiene e.ctrlKey = false . Pero si mantiene presionada la tecla ctrl y desplaza una página, e.ctrlKey igual a true .

No pude encontrar una mejor solución. :(

Demo

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

Answer 7

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

Solución encontrada al mezclar estos dos enlaces:

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