La forma más rápida de hacer una captura móvil de una web desde el ordenador es abrir la página en vista móvil y capturarla: en el modo dispositivo de Chrome DevTools, usa Capture screenshot o Capture full size screenshot en el menú de la barra de dispositivos; en una extensión de vista móvil, pulsa su botón de captura. Ambas opciones generan una imagen de la página tal como la muestra un móvil, sin tocar ningún teléfono.
El método depende de si necesitas la pantalla visible o la página entera, y de si la imagen debe llevar marco de teléfono.
¿Área visible o página completa?
Decídelo primero, porque las herramientas cambian.
Una captura del área visible muestra lo que una persona ve en la pantalla del móvil sin hacer scroll. Sirve para informes de errores («el botón queda tapado por el aviso de cookies»), imágenes de marketing al estilo de las tiendas de apps y revisiones de diseño de la primera pantalla.
Una captura de página completa une toda la página desplazable en una sola imagen alargada. Sirve para revisar contenidos, aprobar una landing o archivar una página antes de un rediseño. Ten en cuenta que las cabeceras fijas, las imágenes con lazy loading y las animaciones al hacer scroll pueden verse raras en estas capturas, porque el navegador renderiza toda la página de golpe.
Método 1: el modo dispositivo de Chrome DevTools
- Abre DevTools (
F12) y activa la barra de dispositivos (Ctrl + Shift + M, oCmd + Shift + Men Mac). - Elige un dispositivo y recarga la página.
- Abre el menú de tres puntos arriba a la derecha de la barra de dispositivos.
- Elige Capture screenshot para el área visible o Capture full size screenshot para la página completa.
Para incluir el contorno del teléfono, elige un dispositivo con nombre y activa Show device frame en el mismo menú antes de capturar. Chrome guarda un PNG en tu carpeta de descargas.
También puedes lanzar los mismos comandos desde el menú de comandos: pulsa Ctrl + Shift + P (Cmd + Shift + P en Mac) y escribe «screenshot». Ahí hay una opción extra, Capture node screenshot, que captura un único elemento seleccionado y viene bien para documentar un componente.
Método 2: una extensión de vista móvil
Si haces capturas móviles a menudo, el camino de DevTools se vuelve repetitivo. Mobile View Extension tiene un botón de captura en su barra flotante. Elige un preajuste de móvil o tablet y guardará un PNG del área visible con marco, exactamente lo que se ve en la vista previa. Como la vista móvil sigue activa mientras navegas, puedes recorrer un sitio y capturar cada página en unos segundos.
Así se obtienen capturas del área visible. Para una captura de página completa, DevTools es mejor herramienta.
Método 3: un móvil real
Las capturas de un móvil real son las más fieles, porque incluyen la barra de direcciones del navegador, el notch o la Dynamic Island y el renderizado real de las fuentes. En la mayoría de los móviles, tras una captura normal aparece una opción de captura con desplazamiento o de «página completa». En iPhone, Safari ofrece la pestaña Página completa en el editor de capturas, que guarda la página como PDF.
Usa capturas de dispositivo real para todo lo que un cliente o responsable vaya a juzgar píxel a píxel.
Cómo conseguir imágenes nítidas y fieles
Algunos detalles hacen las capturas móviles más útiles:
- La densidad de píxeles decide la nitidez. Un viewport de iPhone de 390 px de ancho con densidad 3 genera una imagen de 1170 px de ancho. Si la captura se ve borrosa, comprueba que el dispositivo emulado tenga la densidad correcta. La tabla de tamaños de pantalla de iPhone recoge las densidades de los modelos actuales.
- Espera a las fuentes y las imágenes. Captura cuando ya hayan cargado las fuentes web y las imágenes con lazy loading, o entregarás una captura con fuentes de reserva y cajas grises.
- Decide qué hacer con las capas superpuestas. Los avisos de cookies y los chats tapan buena parte de una pantalla pequeña. Decide si deben salir en la captura; en un informe de errores, normalmente sí.
- Indica qué has emulado. Añade el dispositivo, el navegador y la fecha al nombre del archivo o al ticket, por ejemplo
pricing_iphone-16_chrome-emulated_2026-10-21.png. Las herramientas del navegador renderizan con el motor de Chrome, así que una captura etiquetada como «iPhone» puede diferir un poco del Safari real.
Cómo usar las capturas móviles en tu trabajo
Las capturas móviles rinden en tres sitios. En QA, adjúntalas a los tickets para que el equipo de desarrollo vea el viewport exacto donde algo falla, junto con el ancho, que puedes leer en la barra de dispositivos. En las revisiones de diseño, pon las capturas de móvil y escritorio una al lado de otra para comprobar que el orden del contenido sigue teniendo sentido. En marketing, usa capturas con marco en landings y fichas de apps, pero hazlas desde un dispositivo real o indica claramente que son una emulación.
Para el proceso de pruebas más amplio del que forman parte, consulta el checklist de pruebas de web móvil.
Preguntas frecuentes
¿Cómo hago una captura de pantalla de página completa en versión móvil en Chrome?
Abre DevTools, activa la barra de dispositivos, elige un dispositivo, recarga y selecciona Capture full size screenshot en el menú de tres puntos de la barra de dispositivos.
¿Puedo hacer una captura móvil sin DevTools?
Sí. Una extensión de vista móvil con botón de captura, como Mobile View Extension, captura la vista a tamaño de móvil desde una barra flotante.
¿Por qué mi captura móvil es tan ancha en píxeles?
Las capturas se guardan con la densidad de píxeles del dispositivo. Un viewport de 390 px a 3x genera una imagen de 1170 px de ancho. Es lo esperado y mantiene la imagen nítida en pantallas de alta densidad.