Zoom en el navegador
Los navegadores tienen habilitado poder hacer zoom a los contenidos por cuestiones de accesibilidad, es decir, hacer la navegación adecuada para todas las personas. De este modo por medio de la tecla CTRL + el símbolo de más se aumenta el tamaño del texto y con esto el tamaño de los elementos y cajas del sitio web.
Hacer lo imposible
Entre las locuras que de repente se ocurren a los clientes, hace un tiempo me pidieron que un elemento no cambiara en lo absoluto mientras se hacia zoom en el navegador.
Investigué mucho y me di cuenta que existen muchas personas discutiendo acerca de poder deshabilitar la opción del zoom, sin embargo, mas allá que negar a los usuarios poder hacer zoom, lo que tenía que -y que si lo hice- era poder evitar que un elemento en específico cambiara de tamaño.
Evitar el zoom del navegador en un elemento
Primero tenemos que modificar el CSS y eso debe ser para cumplir las siguientes dos reglas:
Regla 1:
Los tamaños de los contenidos deben estar en porcentaje y no en pixeles.
Regla 2:
La unidad de medida para la fuente debe estar en em
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(window).resize(function() { var width = window.innerWidth; var percent = width * 100 / 1024; console.log('Percent: '+percent); if(percent >= 100){ $('#recommended-popup').css('font-size','1.406em'); } else if(percent < 100){ var fontSize = percent * 1.406 / 100; $('#recommended-popup').css('font-size',fontSize+'em'); } /*$('#recommended-popup').css('font-size',1.406-(size*2)+'em'); $('#recommended-popup').css('width',29.8-size+'%'); $('#rec-left-title').css('width',40.412+size+'%');*/ }); |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
Pero faltó lo segundo, cómo hacer para inhabilitar el zoom en mi navegador?? es incómodo que el touchpad esté tan cerca del teclado que se hace zoom cuando acerco ambas manos al teclear.