soy Kseso y esto EsCSS

Descuadres al hacer zoom: tienes un problema y quizás no es el que piensas

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

·Por Kseso ✎ 2

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.

avatar del Editor del blog

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 Don Kseso Kseso