Disattiva zoom pizzico Chrome per l'utilizzo nel chiosco

Question

Stiamo utilizzando Chrome in modalità kiosk e, accidentalmente, gli utenti stanno facendo ingrandire l'applicazione con la recente aggiunta del supporto per zoom con pizzico. Hanno poi pensano hanno rotto e semplicemente a piedi lasciando l'applicazione (e, successivamente, un touch screen 55") in uno stato rotto.

Ora l'unica cosa da lavoro è stato arresto propagazione degli eventi per gli eventi di tocco oltre 2 In questo caso, non possiamo fare app multitouch e se agisci velocemente il browser reagisce prima di javascript, che nei nostri test si verifica ancora in caso di incidente

Ho fatto i meta tag, Onestamente spero di poter disabilitare lo zoom cromato, ma non riesco a trovare un modo per farlo

Come posso impedire al browser di zoomare?

Answer 1

Abbiamo avuto un problema simile, si manifesta con lo zoom del browser ma javascript non riceve alcun evento touch (o talvolta solo un singolo punto prima dell'inizio dello zoom).

Abbiamo trovato queste possibili (ma forse non a lungo termine): soluzioni

1. Disattivare il pizzico/caratteristiche magnetiche quando si utilizza la modalità kiosk

Se queste impostazioni della riga di comando rimangono in Chrome, è possibile effettuare le seguenti operazioni:

chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0 

• --disable-pinch - disabilita la pinch-to-zoom funzionalità
• --overscroll-storia-di navigazione = 0 - disabilita la funzionalità colpo da navigare

2. Disabilitare zoom pinch utilizzando Chrome bandiere chrome: // flags/# enable-pinch

Passare all'URL chrome: // flags/# enable-pinch nel browser e disabilitare la funzionalità.

La funzione di zoom pinch è attualmente sperimentale ma attivata per impostazione predefinita, il che probabilmente significa che verrà attivato forzatamente nelle versioni future. Se ti trovi in ​​modalità kiosk (e controlli l'hardware/software), potresti probabilmente attivare questa impostazione al momento dell'installazione e quindi impedire l'aggiornamento degli aggiornamenti di Chrome.

Esiste già un ticket della roadmap per rimuovere questa impostazione su Chromium Issue 304869.

Il fatto che il browser reagisca prima di javascript può impedire che sia sicuramente un bug ed è stato registrato allo Chromium bug tracker. Speriamo che venga risolto prima che la funzione sia abilitata in modo permanente o incrociata con le dita, lasciandola come impostazione.

3.Disabilitare tutti i tocchi, whitelist per gli elementi e gli eventi corrispondenti la vostra applicazione

In tutti i test che abbiamo condotto, aggiungendo preventDefault() per il documento per bloccare lo zoom (e tutti gli altri strisciare/touch eventi) in Chrome:

document.addEventListener('touchstart', function(event){ 
    event.preventDefault(); 
}, {passive: false}); 

Se si collega la funzionalità basata sul tocco più in alto nel DOM, si attiverà prima che bolla alla chiamata preventDefault() del documento. In Chrome è anche importante includere il parametro eventListenerOptions perché a partire da Chrome 51 a document-level event listener is set to {passive: true} by default.

In questo modo si disattivano le normali funzioni del browser, ad esempio lo scorrimento per scorrere, probabilmente sarà necessario implementarle manualmente. Se si tratta di un'app kiosk a schermo intero non scorrevole, forse queste funzionalità non saranno importanti.

Answer 2

Proprio così chiunque imbattersi in questa pagina è consapevole la bandiera in Chrome per disabilitare 'pinch to zoom' è ora:

Google Chrome/Chromium/versione Canary superiore a 50:

chrome://flags/#touch-events

Google Chrome/Chromium/versione Canary meno di 50 o vecchie versioni:

chrome://flags/#enable-pinch.

Answer 3

A partire dalla versione 51.0.2704.84 m, chrome: // flags/# touch-events disabilita tutti gli eventi di tocco non solo la funzione di pizzicamento. FYI. Speriamo che Google restituirà questa funzionalità in una versione futura.

Answer 4

Ho a che fare con lo stesso problema. Credo di poter gestire ragionevolmente bene con il seguente approccio

• determinare la larghezza css pixel dell'elemento html: document.documentElement.clientWidth
• confronta questa misura alla larghezza pixel nota dello schermo chiosco
• se il html l'elemento è più ampio, in pixel css rispetto allo schermo, in pixel fisici, il che significa che è ridimensionato
• se l'elemento html è ridimensionato, applicare uno zoom all'elemento del corpo per compensare. La formula è `body.style.zoom = htmlElementClientWidth/screenPhysicalPixelWidth

Questa techique ha l'effetto collaterale benefico di scalare automaticamente l'interfaccia utente per qualsiasi dimensione della finestra corrente è, che è utile per lo sviluppo, se sto sviluppando su una schermata più piccola della schermata di destinazione.

Maggiori informazioni sui pixel dello schermo rispetto ai pixel css e una discussione su come l'elemento html si espande per riempire lo spazio disponibile a quirksmode.org.

Answer 5

Un'altra soluzione che attualmente lavora in Chrome (54) è di aggiungere un listener di eventi per l'evento 'touchstart' e chiamare preventDefault() in base alla lunghezza del targetTouches o touches sull'evento.

Questa soluzione impedisce un pizzico (qualsiasi gesto a due dita per quella materia), ma offre comunque flessibilità con il modo in cui si desidera rispondere all'evento.È una soluzione piacevole perché non richiede di disattivare completamente gli eventi di tocco (come richiesto se si desidera disabilitare il pizzicamento utilizzando le flag chrome, poiché chrome://flags/#enable-pinch non esiste più).

window.addEventListener('touchstart', function(e) { 
 
    if (e.targetTouches.length === 2) { 
 
    e.preventDefault(); 
 
    } 
 
}, false);

Some text that you can't pinch zoom on Chrome (tested in 54)

Answer 6

html, css{ 
touch-action:none; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action