El diseño responsivo busca que un sitio sea utilizable en distintos anchos y orientaciones del viewport. Probar solo un escritorio y un teléfono puede dejar pasar problemas de desbordamiento, ajuste de texto y navegación entre esos puntos. Este probador basado en navegador cambia el tamaño de un iframe aislado a dimensiones CSS predefinidas o personalizadas para facilitar revisiones visuales repetibles. Es una ayuda para probar viewports, no un reemplazo de dispositivos reales, las herramientas del navegador ni las comprobaciones de accesibilidad.
Elegir y Probar Breakpoints
Los breakpoints son decisiones del contenido y del diseño de cada sitio, no categorías universales de dispositivos. Tailwind, Bootstrap y Material usan umbrales distintos, y un sitio puede necesitar más o menos puntos de cambio. Prueba los anchos definidos por el CSS del proyecto y valores intermedios justo antes y después de cada umbral. En cada ancho, revisa la navegación, las columnas, el ajuste del texto, las imágenes, los formularios y el desbordamiento horizontal. Este probador hace repetibles esas comprobaciones de viewport, pero no identifica breakpoints ni decide si un diseño es correcto.
Presets vs Pruebas de Viewport Personalizadas
Los presets son pares de ancho y alto con nombre que resultan prácticos para objetivos comunes. Las dimensiones personalizadas son mejores cuando el CSS del proyecto usa breakpoints específicos o cuando necesitas reproducir un informe de error. El marco y el iframe cambian de tamaño, pero el probador no cambia el agente de usuario, no emula el DPR de un dispositivo real, no dibuja su notch, no proporciona áreas seguras, no simula el teclado ni reproduce la interfaz del navegador móvil. Usa la emulación del navegador y dispositivos físicos cuando esos comportamientos importen, y este probador para comparaciones rápidas de viewport.
Lista Práctica de QA Responsivo
Usa este probador como una lista manual: carga una URL permitida, revisa anchos estrechos, intermedios y amplios, rota objetivos móviles y de tableta, y observa el ajuste del texto, las imágenes, los formularios, la navegación, los elementos fijos y el desbordamiento horizontal. Un estado vacío o de error puede significar que el objetivo bloquea la incrustación en iframe; no demuestra que el sitio esté averiado. El tamaño de los objetivos táctiles, el teclado, el foco, los lectores de pantalla y los problemas de dispositivos reales requieren comprobaciones separadas. Al informar un error responsivo, registra el ancho, el alto, el zoom, el navegador y la URL para que otra persona pueda reproducirlo.