Descuadres al hacer zoom: tienes un problema y quizás no es el que piensas 22.3.15
Si observas que al hacer zoom+ o zoom- en tu página aparecen problemas como un gran scroll horizontal o que se pierden elementos, eso es que tienes un problema. ¿Cuál? Aquí puedes descubrirlo y aprender a evitarlo,
Descuadres al hacer zoom: tienes un problema y quizás no es el que piensas
La posibilidad de hacer zoom sobre las páginas es una característica que el navegador pone a disposición del usuario, no del desarrollador, para que, en caso de necesitarlo, aumente o disminuya el tamaño de los elementos.
Y por elementos entiende todo de todo: todas y cada una de las propiedades indicadas de todos y cada uno de los objetos: font-size en textos, anchura de bordes, medidas de las cajas, tamaños de las imágenes... todo es todo.
Hay quienes se preocupan y consultan cuando al realizar zoom+ se le descuadra o descompone el ordenamiento que han maquetado. O aparece un gigantesco scroll horizontal. Y en ese momento piensan que el problema es cómo arreglar ese desaguisado.
¡ERROR!
El zoom no es una funcionalidad que utilicen de forma continua todos y cada uno de los usuarios en todas y cada una de las páginas que visitan. Más bien es una acción que sólo llevan a cabo los desarrolladores y aquellos usuarios que de verdad lo necesitan.
Así que ahora es el momento de que te preguntes cuál ha de ser la pregunta a realizar:
¿Los visitantes de tu página tendrán necesidad de hacer zoom en ellas?
Si crees que sí será porque tú mismo eres consciente de que algo falla en el tema de la accesibilidad. Así que sería un error que centres tus esfuerzos en corregir el descuadre en el zoom en vez de evitar el motivo por el que lo harán.
Si suprimes la necesidad evitarás la acción.
Si tu respuesta es no hay motivo, la preocupación es vana. Si no tienen porqué nadie lo hará.
Pero esto es mi opinión. ¿Cuál es la tuya?
Evitar el descuadre y scrool al hacer zoom
Pero como seguro que no has llegado aquí esperando sólo lo anterior sino buscando soluciones prácticas a tu problema
, vamos con unos apuntes para que no lo sufras.
La herramienta del zoom en el navegador lo que hace es simular un cambio en la resolución de la pantalla manteniendo el tamaño de la misma. Eso se traduce en que cambia el tamaño del píxel. Al hacer zoom+ cada píxel pasa a ser de un tamaño mayor y al hacer zoom- simula un píxel de menor tamaño.
A la vez que cambia ese aspecto del hardware, otro ocurre respecto a las reglas css que aplica como consecuencia del primero.
Si partimos de una pantalla de 1280px de anchura, por ejemplo, cada vez que hacemos zoom+ el navegador simula una menor resolución de pantalla y si hemos declarado reglas @media aplica los estilos que correspondan al nuevo tamaño.
Volvamos a nuestro diseño que se ve de lujo en nuestra supuesta pantalla anterior de 1280px. Si haces varios zoom- y aparecen problemas probablemente esos mismo problemas los presente en pantallas de resoluciones menores.
Si aparece Scroll en X
Aparecerá cuando algún elemento tenga un tamaño tal que no quepa en la pantalla. Esto suele ser porque dicho elemento tenga definido su tamaño (width o min-width) en unidades absolutas (píxeles por ejemplo).
Las imágenes y otros elementos reemplazados con tamaños intrínsecos son propensas a causar la aparición del scroll, una buena práctica es declararles una anchura máxima en unidades relativas: max-width: 100%
Si desaparecen elementos
Suele ser porque una caja padre tiene tamaños declarados y parte de su contenido queda inaccesible, bien por efecto de algún overflow o porque dicho contenido esté posicionado de forma absoluta fuera del tamaño actual de la caja padre.
Si hay descuadres
Esto suele deberse a una mala concepción del diseño. No está pensado para que se adapte a las distintas resoluciones que hay en la actualidad. Habrás de encontrar qué y cuándo se produce el efecto y sopesar las razones que has tenido para hacerlo así y no diseñarlo para que fluya. Lo que es lo mismo, que no sea un diseño responsive
en su acepción básica de adaptarse a cualquier tamaño.
Bonus:
¿Sabías que al menos firefox permite hacer zoom sólo al texto? Mira la imagen:
Adenda final
La propiedad zoom no existe en css. Fue una de tantas que por obligación introdujo Microsoft para corregir problemas de ie (versiones antiguas) con el haslayout. Aquí lo explica muy bien librosweb.
Artículo publicado originalmente en Abril de 2012. Corregido, actualizado y ampliado en Marzo de 2015.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
gracias, no entendí en "librosweb" la frase: "forzar a un elemento de exploret a que tenga un layout"?. gracias
ResponderEliminarLo cierto es que eso es un tema más de uso interno en los navegadores, pero cuando los efectos se hicieron complejos nos obligaron a entender un poco mejor de qué iban.
EliminarInternet Explorer necesitaba hacer una división entre los elementos HTML según la forma en que se interpretaban sus pixeles. Mas exactamente, la posición de sus pixeles.
Esto era porque algunos de sus inventos (como los filtros) modificaban el elemento pixel a pixel, y su DirectX (propietario) necesitaba una referencia de límites para calcular los cambios a cada uno. Salvando las distancias, sería como poner elementos con posición absoluta en cualquier contenedor de posición "natural" o "fluída" del documento; los elementos van a ignorar los límites de su padre y van a posicionarse según el origen del body. Para que el navegador pueda ver las coordenadas del padre y ubicar a sus hijos según donde empiece, hay que ponerle un layout, que se hace declarándole una posición relativa. Esto es un "truco" que ya conocemos todos.
Y para saber dónde encontrar sus pixeles, el elemento debe ponerse en una "caja".
El problema es que IExplorer siempre prefirió los elementos sin layout, y los ponía cuando eran realmente necesarios (por una cuestión de consumo de recursos), y su criterio sobre cuáles etiquetas debían tenerlo por default, no coincidía siempre con los del estándar.
Hoy los demás navegadores por fin se acercaron a los efectos que Microsoft inventó hace 15 años, aunque sin complementos propietarios. Y tienen algunos de los mismos problemas, que nos están haciendo "resolver" a nosotros con will-change.