El desarrollo web responsivo moderno requiere probar más que una pantalla de escritorio y un teléfono. Los sitios se usan en una amplia variedad de tamaños, desde las pantallas exteriores compactas de los teléfonos plegables hasta monitores 4K ultrapanorámicos. Este probador en el navegador ofrece una herramienta interactiva para revisar un dispositivo, comparar varios a la vez, ajustar automáticamente la escala y generar consultas de medios CSS listas para copiar.
Pruebas con un dispositivo y con la matriz multidispositivo
La vista de un solo dispositivo permite inspeccionar con detalle los objetivos táctiles y el flujo del contenido en una dimensión concreta. La matriz multidispositivo permite comprobar a la vez varios puntos de interrupción clave. Comparar móvil (390×844), tableta (820×1180), laptop (1280×800) y escritorio (1920×1080) ayuda a detectar regresiones como saltos incorrectos de línea, elementos superpuestos o estados de navegación incoherentes.
Ajuste automático y revisión de la relación de aspecto
Probar resoluciones de escritorio como 1920×1080 o 2560×1440 en una laptop de 13 pulgadas suele obligar a desplazarse horizontalmente. El ajuste automático usa transform: scale(...) de CSS para reducir las vistas grandes hasta que quepan en el espacio disponible, sin cambiar las dimensiones CSS que recibe la página incrustada. Junto con el cálculo de la relación de aspecto, permite revisar formatos 16:9, 16:10, 4:3 y las pantallas móviles alargadas.
Desarrollo local y restricciones de iframe
Durante el desarrollo local, los accesos rápidos permiten abrir enseguida puertos habituales, como localhost:3000, localhost:5173 y localhost:8080. Algunos dominios de producción envían encabezados X-Frame-Options: DENY o una política CSP frame-ancestors 'none'; por seguridad, el navegador bloquea su carga en un iframe. En ese caso, abre el sitio en una pestaña externa o usa Test Playground, la muestra integrada que incluye cuadrículas, formularios y tarjetas responsivas.