Disattiva zoom pizzico nel webkit (o elettrone)

Question

C'è un modo per disabilitare lo zoom con pizzico in un'app electron?

non riesco a farlo funzionare dall'interno del web-view con metodi JavaScript normali, come descritto qui: https://stackoverflow.com/a/23510108/665261

Sembra la bandiera --disable-pinch è not supported by electron.

Ho sperimentato con vari metodi di utilizzo:

1. event.preventDefault() su JavaScript touchmove/mousemove eventi
2. meta viewport tag in HTML
3. -webkit-text-size-adjust in CSS
4. bandiere/config per elettrone

C'è qualche metodo per il webkit in generale, o electron in particolare?

Answer 1

UPDATE 2:

Usa webFrame.setZoomLevelLimits (v0.31.1 +) in render processo (Differences Between Main Process and Renderer Process). Perché lo zoom intelligente su mac funziona ancora con document.addEventListener.

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

---

UPDATE:

deltaY immobili per pinch zoom ha float valore, ma evento normale scorrimento tornare int valore. Ora la soluzione non ha problemi con il tasto ctrl.

Demo 2.

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

---

Utilizzando cromo monitorEvents(document) ho scoperto che è responsabile di questo evento mousewheel. Non lo so, perché mousewheel attivato con zoom pizzico. Il passo successivo, trova la differenza tra lo scorrimento normale e lo zoom con pizzico.

Zoom pizzico ha un attributo e.ctrlKey = true e l'evento di scorrimento normale ha e.ctrlKey = false. Ma se si tiene premuto il tasto ctrl e si scorre una pagina, e.ctrlKey uguale a true.

Non sono riuscito a trovare una soluzione migliore.:(

Demo

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

Answer 2

C'è un motivo per cui non è possibile utilizzare:.

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

Metti che nell'intestazione e mantiene dispositivi da zoom

Answer 3

Sembra molto difficile per il browser desktop impedire lo zoom pizzico.

Ecco alcune idee però!

1) Utilizzando alcuni gesti javascript come hammer.js, rilevano eventi Pinch e cercare di evitare che utilizzando e.preventDefault

O

2) Design tutto con "%" nel css, o utilizzare le unità più recenti come "vm" ecc. (se possibile). In questo modo, anche la pagina verrà ingrandita, ma il contenuto rimarrà lo stesso per qualsiasi livello di zoom.

Tutto il meglio!

Answer 4

Il metatag dovrebbe avere funzionato. Provate ad usare il minimo scala = 1,0

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

E se anche non funziona quindi aggiungere sia la

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

P.S. minima e massima scala : Disabiliterà lo zoom solo sui telefoni cellulari.

Answer 5

Ho cercato così a lungo e duramente per una soluzione semplice a questo problema senza alcun risultato ... ma in seguito ho scoperto un plugin chiamato fullpage.js che è stato in grado di prevenire lo zoom pizzico pur consentendo comunque i gesti tattili. Attraverso il processo di eliminazione js/css, ho scoperto una soluzione molto semplice:

touch-action: none; 

L'aggiunta di questo al mio elemento pagina intera impedito con successo pinch zoom, ma mi ha permesso di scalare fabricjs oggetti con pizzicotti. Urrà!