google chrome - teclado - Desactivar el zoom de chrome para usar en un quiosco
zoom google chrome (6)
A partir de la versión 51.0.2704.84 m, chrome: // flags / # touch-events desactiva todos los eventos táctiles, no solo la función de pellizco. Para tu información Con suerte, Google devolverá esta funcionalidad en futuras versiones.
Estamos utilizando Chrome en modo kiosco y, accidentalmente, los usuarios están causando que la aplicación se acerque con la reciente incorporación del soporte de zoom emergente. Luego piensan que lo han roto y simplemente se van dejando la aplicación (y posteriormente una pantalla táctil de 55 ") en un estado roto.
Ahora lo único que funciona es detener la propagación de eventos para eventos táctiles de más de 2 puntos. Los problemas con eso son que no podemos hacer aplicaciones multitáctiles en ese caso y si actúas con rapidez, el navegador reacciona antes que JavaScript. Lo que en nuestras pruebas aún sucede por accidente por parte de los usuarios.
He hecho las etiquetas Meta, no funcionan. Honestamente, me gustaría poder inhabilitar el zoom cromado, pero no puedo encontrar la manera de hacerlo.
¿Cómo puedo detener el zoom del navegador?
Estoy tratando con el mismo problema. Creo que puedo manejarlo razonablemente bien con el siguiente enfoque
- determine el ancho de píxel css del elemento html:
document.documentElement.clientWidth - compare esta medida con el ancho de píxel conocido de la pantalla del kiosco
- si el elemento html es más ancho, en píxeles css que en la pantalla, en píxeles físicos, eso significa que está escalado
- Si se escala el elemento html, aplique un zoom al elemento del cuerpo para compensar. La fórmula es `body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth
Esta técnica tiene el efecto secundario beneficioso de escalar automáticamente la interfaz de usuario a cualquier tamaño que sea la ventana actual, lo cual es útil para el desarrollo si estoy desarrollando en una pantalla más pequeña que la pantalla objetivo.
Más información sobre píxeles de pantalla frente a píxeles css, y una discusión de cómo el elemento html se expande para llenar el espacio disponible en quirksmode.org .
Hemos tenido un problema similar, se manifiesta como el zoom del navegador pero javascript no recibe ningún evento táctil (o, a veces, solo un punto antes de que comience el zoom).
Hemos encontrado estas posibles soluciones (pero posiblemente no a largo plazo):
1. Desactive las funciones de pellizcar / deslizar cuando utilice el modo kiosco
Si estas configuraciones de línea de comandos permanecen en Chrome, puedes hacer lo siguiente:
chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
- --disable-pinch - desactiva la funcionalidad de pellizcar para hacer zoom
- --overscroll-history-navigation = 0 - desactiva la funcionalidad de deslizar para navegar
2. Desactive el zoom de pellizco utilizando las banderas de Chrome chrome: // flags / # enable-pinch
Vaya a la URL chrome: // flags / # enable-pinch en su navegador y desactive la función.
La función de zoom de pellizco está actualmente en fase experimental, pero está activada de forma predeterminada, lo que probablemente significa que estará habilitada para la fuerza en versiones futuras. Si está en modo kiosco (y controla el hardware / software), probablemente podría cambiar esta configuración durante la instalación y luego evitar que las actualizaciones de Chrome sigan adelante.
Ya hay un ticket de hoja de ruta para eliminar esta configuración en Chromium Issue 304869 .
El hecho de que el navegador reaccione antes de que JavaScript pueda evitarlo es definitivamente un error y se ha registrado en el rastreador de errores de Chromium . Es de esperar que se arregle antes de que la función esté habilitada de forma permanente o que se crucen con los dedos, dejándola como una configuración.
3. Desactive todos los toques, la lista blanca de elementos y eventos que coincidan con su aplicación
En todas las pruebas que hemos realizado, la adición de preventDefault () al documento detiene el zoom (y todos los demás eventos de deslizamiento / toque) en Chrome:
document.addEventListener(''touchstart'', function(event){
event.preventDefault();
}, {passive: false});
Si adjunta su funcionalidad táctil en el DOM, se activará antes de que aparezca en la llamada preventDefault () del documento. En Chrome también es importante incluir el parámetro eventListenerOptions porque a partir de Chrome 51 , el detector de eventos a nivel de documento se establece en {passive: true} de manera predeterminada .
Sin embargo, esto deshabilita las funciones normales del navegador, como deslizar para desplazarse, probablemente tendría que implementarlas usted mismo. Si se trata de una aplicación de quiosco no desplazable de pantalla completa, tal vez estas características no sean importantes.
Otra solución que actualmente funciona en Chrome (54) es agregar un detector de eventos para el evento ''touchstart'' y llamar a preventDefault() función de la longitud de targetTouches o touches en el evento.
Esta solución previene un pellizco (cualquier gesto de dos dedos), pero aún así proporciona flexibilidad con la forma en que desea responder al evento. Es una buena solución porque no requiere que desactives los eventos táctiles por completo (como se requiere si deseas deshabilitar el pellizco usando las banderas de cromo, ya que chrome://flags/#enable-pinch ya no existe).
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)
Solo para que cualquier persona que se encuentre en esta página sea consciente de que la bandera en Chrome para deshabilitar ''pellizcar para ampliar'' ahora es:
Versión de Google Chrome / Chromium / Canary superior a 50:
chrome://flags/#touch-events
Versión de Google Chrome / Chromium / Canary menos de 50 o versiones anteriores:
chrome://flags/#enable-pinch .
html, css{
touch-action:none;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action