0
220
Vistas¿Cómo evitar que los usuarios magnifiquen mi sitio web?
¿Cómo puedo evitar que los usuarios amplíen el sitio web?
Estoy tratando de desarrollar una aplicación de sitio web React que pueda crear diseños para otros sitios web. Un sitio web existente que pude encontrar es Figma , y tiene una característica elegante: los usuarios no pueden ampliar su página web usando movimientos de pellizco en mi panel táctil, lo cual es realmente útil ya que las barras de herramientas siempre estarán allí. Tenga en cuenta que estoy usando una computadora Mac en lugar de dispositivos con pantalla táctil.
Editar : ya proporcioné la función para permitir que los usuarios amplíen la página central. (S:__% significa escala aquí). Pero cuando los usuarios intentan ampliar la página, solo quiero que se amplíe la página central y dejar que esas barras de herramientas permanezcan. Actualmente, cuando los usuarios amplían la página, las barras de herramientas también se amplían.
Pasé alrededor de 4 horas buscando cómo implementar esta función, pero todavía fallé. ¿Alguien podría ayudarme con esto? ¡Agradezco su tiempo y esfuerzo! ¡Muchas gracias!
Cosas que he probado hasta ahora:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> CSS: html, body, #root, .app { height: 100%; width: 100%; touch-action: pan-x pan-y; } window.addEventListener("resize", () => {console.log("...")}); document.body.addEventListener("transitionstart", ()=>{...}); /* Listening to touchstart, touchend, touchmove events (I'm not using touch screen devices so this doesn't work). Monitoring dpi changes (dpi doesn't change during magnification), */ Aquí está mi aplicación (todavía es un prototipo). 
Aquí está mi aplicación después de la ampliación (obviamente, no quiero que los usuarios lo hagan). 
Aquí está la página de Figma. La ampliación no funciona en su página. 
2 Respuestas
Responde la pregunta0
Zoom con atajos de teclado
Como se señaló en esta pregunta ("Evitar zoom entre navegadores" en StackOverflow), puede escuchar eventos de keydown de teclado y usar event.preventDefault() para evitar que el usuario acerque y aleje su página (si lo hace con atajos de teclado) pero aún pueden ir a la configuración del navegador y modificarlo manualmente.
Sería algo como esto:
window.addEventListener('keydown', function(e) { // Key codes 187 and 189 are for '+' and '-' keys (this may change from browser to browser) if (e.ctrlKey && (e.keyCode === 187 || e.keyCode === 189)) { e.preventDefault(); // ... code to zoom your main pane } }); // code tested on Brave BrowserEsto no es necesariamente malo. Como señalé en mi comentario, los usuarios pueden tener muy buenas razones para acercar y alejar su sitio, como mejorar la accesibilidad. Lo que puede hacer es evitar que usen accesos directos predeterminados para hacer esto, ya que para su caso de uso específico parece razonable que, en lugar de hacer zoom en todos los elementos de la página de forma predeterminada, solo haga zoom en su "panel principal". Sin embargo, recomendaría que deje los valores predeterminados como están y use sus propios atajos para acercar y alejar (y asegurarse de que no interfieran con ningún otro atajo predeterminado).
Más información sobre eventos de teclado en MDN Web Docs: KeyboardEvent
Hacer zoom con un panel táctil
En cuanto a abordar el zoom con el panel táctil, puede escuchar eventos táctiles (más sobre ellos en MDN Web Docs: eventos táctiles ) y modificar su comportamiento también. Nuevamente, el usuario aún puede ir a la configuración de su navegador y modificar el nivel de zoom allí.
algunos comentarios
No conozco ningún medio para evitar que el usuario modifique los niveles de zoom de la configuración del navegador y me alegraría si no existiera en absoluto, evitar que el usuario haga zoom en la página es una mala decisión de UX y es malo para la accesibilidad.
Y solo un consejo general como desarrollador web: nunca sacrifiques la accesibilidad . Cada vez que piense en modificar algún comportamiento predeterminado del navegador, piense en por qué se implementó en primer lugar y considere a las personas que pueden depender de eso para acceder a su aplicación.
0
El valor del ancho puede diferir para usted, pero la prevención del escalado por el usuario se establece en una metaetiqueta de ventana gráfica como esta: <meta name="viewport" content="width=device-width, user-scalable=no">
A menos que esté malinterpretando su problema, esto debería solucionarlo.