Captura responsiva
Qué son las capturas responsivas, los tamaños de ventana gráfica habituales y los errores que conviene evitar al capturar en varios dispositivos.
Una captura responsiva es una imagen de una página web renderizada con un ancho y una altura de ventana gráfica concretos, normalmente tomada como conjunto en varios tamaños. Los sitios responsivos usan consultas de medios CSS, consultas de contenedor y maquetaciones flexibles, así que la misma URL puede mostrar una navegación, un número de columnas y un recorte de imagen distintos en cada ancho.
Un navegador produce la maquetación de teléfono solo cuando la propia ventana gráfica es estrecha. Reducir una captura de escritorio no cambia la maquetación. Por eso las herramientas definen el tamaño de la ventana gráfica y, a menudo, el factor de escala del dispositivo y el user agent antes de cargar la página.
Por qué importan las capturas responsivas
Las revisiones de diseño, la aprobación del cliente y QA necesitan pruebas de cómo se ve una página en cada punto de ruptura. Un error de maquetación suele aparecer solo en un ancho, como un menú que se superpone al logotipo en tabletas. Un conjunto de capturas con tamaños fijos hace visibles esos errores en una sola revisión.
Tamaños de ventana gráfica habituales
| Clase | Ejemplo de ventana gráfica |
|---|---|
| Escritorio | 1920×1080, 1440×900, 1366×768 |
| Tableta | 768×1024 en vertical |
| Teléfono | 390×844, 360×800 |
Los tamaños se expresan en píxeles CSS. Un teléfono con escala 3x renderiza 390×844 píxeles CSS con 1170×2532 píxeles físicos.
Cómo hacer capturas responsivas
- En un navegador, abre las herramientas de desarrollo, activa el modo de dispositivo y elige un tamaño.
- En código, define la ventana gráfica en Playwright o Puppeteer antes de la navegación.
- En Website Capture de Temposhot (Command+2), elige un Device: Desktop 1920×1080, Tablet 768×1024 o Mobile 390×844. Cada fila de URL puede tener su propio dispositivo y su propia Area, y Render preview muestra una fila antes de la ejecución completa.
Errores comunes con las capturas responsivas
- Reducir una captura de escritorio en lugar de renderizar con el ancho objetivo.
- Mezclar capturas de ventana gráfica y de página completa en un mismo conjunto de comparación.
- Dejar un banner de cookies que cubre la mitad de la maquetación de teléfono.
- Comparar capturas tomadas con factores de escala distintos.
¿Tomas las mismas capturas una y otra vez?
Añade cada URL una vez por dispositivo en Website Capture y ejecuta la lista en una sola pasada. Consulta las opciones de captura.
Preguntas frecuentes
¿Una captura responsiva es lo mismo que una captura móvil?
No. Una captura móvil es un solo tamaño. Las capturas responsivas forman un conjunto con varios tamaños.
¿Necesito un teléfono real?
Para comprobar la maquetación, un navegador con la ventana gráfica de teléfono suele bastar. Los errores específicos de un dispositivo aún necesitan un dispositivo real.
Fuentes
Recursos relacionados
- Inicio rápido de Website Capture: primera ejecución con una lista de URL.
- Ejecuciones y resultados: estados de las filas y reintentos.
- Calculadora de relación de aspecto: comprueba las proporciones de un tamaño.
¿Repites las mismas capturas de pantalla una y otra vez?
Temposhot captura una pantalla, una ventana o un área con temporizador y exporta el conjunto como PDF, imágenes, ZIP o MP4. Las herramientas gratuitas para navegador solo sirven para imágenes sueltas.
Recursos relacionados
Términos relacionados
- Captura de ventana gráficaQué es una captura de ventana gráfica, en qué se diferencia de la captura de página completa y cuándo es la opción adecuada.
- Captura de página completaQué es una captura de página completa, en qué se diferencia de las capturas de ventana gráfica y de desplazamiento, y cuándo usarla.
- Mockup de dispositivoQué es un mockup de dispositivo, cómo colocar capturas dentro de marcos de dispositivo y dónde lo usan los equipos.
- Captura por lotesQué son las capturas por lotes, en qué se diferencian de las capturas individuales y dónde las usan los equipos.