Online Tool Store
Probador de Nivel de Zoom del Navegador
Prueba el reflow entre 50% y 800% de zoom, con calculadora de ancho efectivo en vivo y detección de desbordamiento según el estándar WCAG 1.4.10 de 320px.
🔒 Esta herramienta funciona totalmente en tu navegador. Tus archivos nunca se suben a un servidor.
Simula el zoom redimensionando un diseño de muestra al mismo "ancho efectivo de CSS" que tendría un navegador real en ese nivel de zoom — una aproximación cercana, no el motor de renderizado real. Confirma siempre en tu propio sitio con el zoom real de tu navegador.
100%
Bienvenido a nuestra tienda
Un breve párrafo de texto para ver cómo se reorganiza y ajusta al cambiar el nivel de zoom simulado.
Cómo usarlo
- Elige un ancho de ventana del navegador (1280px coincide con el punto de referencia estándar WCAG 1.4.10).
- Arrastra el control de zoom o haz clic en un ajuste preestablecido del 50% al 800% — el ancho efectivo de CSS se actualiza en vivo.
- Observa las insignias de aprobado/fallido: si has alcanzado el estándar de 320px de WCAG y si el diseño de muestra necesita desplazamiento horizontal a ese ancho.
- Cambia al modo "Ancho fijo (error común)" para ver cómo un solo elemento de ancho fijo rompe el reflow y falla la comprobación.
- Usa la misma intuición en tu propio sitio, luego verifica con el zoom real del navegador para un resultado preciso.
FAQ
¿Realmente hace zoom en mi navegador?
No — redimensiona un diseño de muestra al mismo "ancho efectivo de CSS" que tendría un navegador real con ese ancho de ventana y nivel de zoom, y luego comprueba si hay desbordamiento horizontal real. Es una aproximación cercana, no el motor de renderizado de tu navegador real. Para tu propio sitio, confirma siempre con el zoom real de tu navegador (Ctrl/Cmd + "+").
¿Por qué le importa a WCAG específicamente el zoom del 400%?
El criterio de éxito 1.4.10 (Reflow) de WCAG 2.1 exige que el contenido se reorganice en una sola columna sin necesitar desplazamiento horizontal a un ancho efectivo de 320 píxeles CSS — el ancho que se obtiene con una ventana de 1280px al 400% de zoom, por lo que 1280px y 400% son el punto de referencia estándar.
¿Qué es el "ancho efectivo" y cómo se calcula?
El ancho efectivo es el ancho de la ventana del navegador dividido por el porcentaje de zoom (por ejemplo, 1280px ÷ 400% = 320px). Representa cuánto espacio en píxeles CSS tiene realmente tu diseño una vez aplicado el zoom — el mismo número que un navegador real reportaría a tu CSS.
¿Qué problemas de diseño suelen aparecer con zoom alto?
Contenedores de ancho fijo que causan desplazamiento horizontal, elementos de navegación superpuestos, texto que desborda su contenedor y botones o tarjetas recortadas son los problemas más comunes que solo aparecen al superar el 150-200% de zoom. Cambia esta herramienta al modo "Ancho fijo (error común)" para ver exactamente cómo se ve ese fallo.
¿El zoom realmente reduce el viewport en píxeles CSS?
Sí. El ancho físico de la ventana del navegador en píxeles CSS se reduce a medida que aumenta el zoom — ese es el mecanismo que simula esta herramienta al calcular el ancho efectivo, y por eso una página construida con anchos fijos en píxeles puede empezar a desbordarse horizontalmente mucho antes del 400%.
Cómo nos comparamos
| Función | Online Tool Store | Probadores centrados en reflow | Herramientas de vista previa por URL |
|---|---|---|---|
| Calculadora de ancho efectivo (ancho de ventana ÷ zoom %) | ✓ | ✓ | ✗ |
| Comprobación en vivo de desbordamiento horizontal (aprobado/fallido) | ✓ | ✓ | ✗ |
| Ajustes de zoom hasta 800% con reflow en vivo | ✓ | ✓ | ✗ |
| No requiere URL externa ni incrustación (funciona al instante, sin bloqueos de X-Frame-Options) | ✓ | ✓ | ✗ |
Un paso de comprobación rápido antes de abrir las herramientas de desarrollo reales y hacer zoom en tu página en vivo.