≡En resumen
- Zooming es ampliar o reducir la vista, y en una web puede afectar a toda la página, solo al texto o solo a una imagen o un mapa.
- El zoom del navegador cambia el ancho disponible y activa el diseño adaptable; el pellizco en el móvil solo amplía lo que ya se ve.
- WCAG 1.4.4 pide texto ampliable al 200 % y WCAG 1.4.10 que la página funcione a 320 px sin desplazamiento horizontal.
- Bloquear el zoom con user-scalable=no o maximum-scale menor que 2 es un fallo de accesibilidad.
- Todo zoom por gestos necesita una alternativa con botones o teclado.
01 ¿Qué es el zooming?
El término no debe confundirse con el zoom óptico de una cámara, que cambia la distancia focal del objetivo, ni con visores especializados de imágenes gigantes como Zoomify, que son una forma concreta de zooming sobre fotografías. Aquí nos centramos en lo que importa al diseñar y desarrollar webs y apps: cómo amplía el usuario y qué tiene que soportar tu interfaz.
02 Tipos de zoom en webs y apps
| Tipo | Cómo se activa | Qué ocurre |
|---|---|---|
| Zoom de página del navegador | Ctrl o ⌘ con + y −, Ctrl con rueda | Escala todo y reduce el ancho CSS disponible: se activan las media queries y el diseño se recoloca |
| Zoom solo de texto | Ajuste de tamaño de fuente del navegador o del sistema | Crece el texto sin escalar imágenes; rompe los diseños con alturas fijas |
| Zoom de pellizco (visual) | Pellizcar o doble toque en móvil y tableta; pellizco en el trackpad | Amplía como una lupa lo que ya se ve, sin recolocar el diseño |
| Zoom del sistema operativo | Lupa de Windows, Zoom de macOS e iOS, Ampliación de Android | Amplía toda la pantalla, incluidas las apps nativas |
| Zoom dentro del contenido | Botones, rueda o gestos en mapas, imágenes o gráficos | Solo cambia la escala de ese elemento; lo programa la web o la app |
03 Pinch-to-zoom y gestos: cómo diseñarlos bien
El pellizco con dos dedos es el gesto de zoom por excelencia en las pantallas táctiles, y el doble toque es su atajo. En escritorio, el equivalente es pellizcar en el trackpad o usar Ctrl con la rueda. El error típico es que la web capture esos gestos para sus propios carruseles o mapas y el usuario ya no pueda ampliar la página.
- ✓Deja el pellizco al navegador salvo en elementos que de verdad necesitan su propio zoom, como mapas o visores de imágenes.
- ✓Si quieres quitar el retardo del doble toque, usa la propiedad CSS touch-action: manipulation, que mantiene el pellizco.
- ✓Ofrece botones visibles de acercar y alejar en mapas y visores: WCAG 2.5.1 exige alternativa de un solo puntero a los gestos de varios dedos.
- ✓Evita que un mapa o una imagen atrape el desplazamiento de la página en el móvil.
- ✓Muestra el nivel de zoom y un botón para volver a la vista inicial en herramientas complejas.
04 Zoom y accesibilidad: WCAG 1.4.4 y 1.4.10
200 %
ampliación de texto que debe soportar la página sin perder contenido ni funciones
Fuente: W3C, WCAG 2.2, criterio 1.4.4
320 px
ancho CSS al que el contenido debe usarse sin desplazamiento horizontal
Fuente: W3C, WCAG 2.2, criterio 1.4.10
2
valor mínimo de maximum-scale en la etiqueta viewport para no bloquear el zoom
Fuente: W3C, regla ACT b4f0c3
El criterio 1.4.4 Cambio de tamaño del texto, de nivel AA desde WCAG 2.0, pide que el texto pueda ampliarse hasta el 200 % sin tecnologías de apoyo y sin perder contenido ni funciones. Quedan fuera los subtítulos y las imágenes de texto. Los fallos documentados por el W3C incluyen texto cortado dentro de contenedores de altura fija (F69), controles de formulario que no crecen con el texto (F80) y tipografías fijadas solo con unidades de viewport (F94).
El criterio 1.4.10 Reflujo, añadido en WCAG 2.1, pide que a 320 px CSS de ancho no haga falta desplazarse en dos direcciones. Lo explicamos a fondo, con las excepciones de tablas y mapas, en la entrada de usabilidad responsive. Si quieres entender cómo se leen estos criterios, consulta la de WCAG.
05 Nunca desactives el zoom: user-scalable y maximum-scale
Apple dejó de respetar ese bloqueo en Safari con iOS 10, y la mayoría de navegadores móviles ofrecen un ajuste de accesibilidad para forzar el zoom, pero no todos los usuarios lo conocen ni todos los navegadores lo hacen. El motivo más común para bloquearlo es evitar que el iPhone amplíe la página al tocar un campo de formulario: Safari lo hace cuando la letra del campo mide menos de 16 px. La solución correcta es dar 16 px a los campos, no quitar el zoom a todos.
06 Cómo hacer zoom en el navegador y probar tu web
| Acción | Windows y Linux | Mac |
|---|---|---|
| Acercar | Ctrl y + | ⌘ y + |
| Alejar | Ctrl y − | ⌘ y − |
| Volver al 100 % | Ctrl y 0 | ⌘ y 0 |
| Zoom por defecto en todas las webs (Chrome) | Configuración, Apariencia, Zoom de la página | Configuración, Apariencia, Zoom de la página |
-
1
Prueba el 200 %
Amplía la página y comprueba que ningún texto se corta ni se solapa y que los formularios siguen funcionando.
-
2
Prueba el 400 % a 1.280 px
Es la prueba del reflujo: no debe aparecer barra de desplazamiento horizontal salvo en tablas, mapas o gráficos.
-
3
Cambia solo el tamaño de letra
En el ajuste de fuente del navegador o del móvil, sube el texto y revisa botones, menús y tarjetas.
-
4
Pellizca en un móvil real
Verifica que puedes ampliar la página y que ningún carrusel o mapa bloquea el gesto.
07 Buenas prácticas de diseño para que el zoom funcione
Unidades relativas
Usa rem o em en tipografías y espaciados para que todo crezca en proporción.
Alturas flexibles
Evita alturas fijas en contenedores con texto: al ampliar, el texto necesita espacio.
Cabeceras contenidas
Una cabecera fija que ocupa un tercio de la pantalla al 200 % deja sin sitio el contenido.
Texto real
El texto dentro de imágenes se pixela al ampliar y no se recoloca; usa texto HTML.
Controles alternativos
Botones de zoom y atajos de teclado en mapas, visores y gráficos.
Estas decisiones se toman al principio, en la maqueta, no al final. En nuestro servicio de diseño UX/UI probamos las pantallas con zoom y tamaño de letra ampliado antes de desarrollar, y en cada proyecto de diseño web profesional revisamos el reflujo como parte del control de calidad.
Preguntas frecuentes sobre Zooming
Significa acercar o alejar la vista de un contenido en pantalla para ver un detalle o una vista general. Viene del inglés to zoom.
Es el gesto de pellizcar con dos dedos sobre una pantalla táctil o un trackpad para ampliar o reducir. Separar los dedos acerca y juntarlos aleja.
Con Ctrl y + o Ctrl y − en Windows y Linux, o ⌘ y + y ⌘ y − en Mac. Ctrl o ⌘ con 0 vuelve al 100 %.
Sí. Impide ampliar la página en algunos navegadores móviles y es un fallo de accesibilidad según el W3C. Usa width=device-width, initial-scale=1 sin limitar el zoom.
El criterio 1.4.4 exige que el texto pueda ampliarse al 200 % sin perder contenido ni funciones, y el 1.4.10 que la página funcione a 320 px CSS sin desplazamiento en dos direcciones.
El zoom de página reduce el ancho disponible y el diseño se recoloca; el de pellizco amplía como una lupa sin cambiar la maqueta.
Safari en iOS amplía automáticamente cuando el texto del campo mide menos de 16 px. Se evita dando 16 px a los campos, no bloqueando el zoom.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗