Tres formas de capturar una web tal como se ve en un móvil: grabar el propio teléfono, emular un móvil en Chrome DevTools o renderizar la página con ancho de móvil a partir de su URL.
Aviral LakhanpaulActualizado el 3 min de lectura
Carga la página con ancho de móvil para que la web sirva su maquetación para móvil real, y captura eso. Puedes grabar la pantalla de un teléfono de verdad, emular un móvil con la barra de dispositivos de Chrome DevTools y grabar la ventana, o darle la URL a una herramienta que lea la página con ancho de móvil y exporte directamente un vídeo en 9:16 o 4:5. Nunca encojas una grabación de escritorio: eso es una página de escritorio pequeña, no la web para móvil.
Una web responsive decide su maquetación según el ancho de la ventana en la que se abre. Con ancho de escritorio obtienes la maquetación de escritorio, da igual a qué forma recortes después el vídeo. Para tener el botón de menú, las columnas apiladas y los botones táctiles más grandes de la web para móvil, la propia página tiene que cargarse con el ancho de un teléfono. Todo lo que sigue son maneras distintas de conseguirlo.
| Método | Ideal para | Cuidado con |
|---|---|---|
| Grabar la pantalla del propio teléfono | Interacción táctil real, en un dispositivo real | La barra de estado y las notificaciones en el plano, un scroll a golpe de dedo |
| Barra de dispositivos de Chrome DevTools | Páginas en localhost o detrás de un inicio de sesión | Se graba una ventana pequeña, con scroll a mano o con un script |
| Renderizar la URL con ancho de móvil | Páginas públicas, un scroll limpio y uniforme | No llega a las páginas privadas |
Tanto iPhone como Android traen un grabador de pantalla en los ajustes rápidos. Captura el dispositivo real, que es lo más fiel, y también el scroll, que es el problema: el pulgar lanza la página y la deja correr, y cada gesto sale distinto.
Abre DevTools, activa la barra de dispositivos (⇧ ⌘ M en un Mac, Ctrl Shift M en Windows) y elige un teléfono de la lista. La página se recarga con ese ancho y con un user agent táctil, y sirve su maquetación para móvil. Graba solo ese viewport con un grabador de pantalla y deja que el scroll lo haga un script; la guía de scroll automático tiene uno.
Pon el zoom de la barra de dispositivos al 100 % antes de grabar; si no, el grabador captura una copia reducida y el texto pierde nitidez.
Pega la dirección en la página de inicio y elige Móvil, o Tableta, arriba del todo en los ajustes del vídeo. La página se carga con ese ancho en nuestros servidores, así que la web responde con la maquetación que sirve de verdad ahí, y se activan las formas que encajan con un teléfono: 9:16, 4:5 y 1:1.
Un vídeo para móvil, renderizado o grabado, es solo la pantalla. Para mostrarlo dentro de un iPhone o un Pixel, coloca el vídeo sobre un dispositivo en una app de mockups o en una plantilla de un editor de vídeo. Exporta en 9:16 para que llene la pantalla del dispositivo sin franjas.
Pega un enlace y previsualiza el scroll gratis. 51 créditos gratis al registrarte, sin tarjeta y sin marca de agua en nada de lo que exportes.
Usa la barra de dispositivos de Chrome DevTools para cargar la página con el ancho de un teléfono y graba ese viewport. O pega la URL en una herramienta que lea la página con ancho de móvil y exporte el vídeo directamente.
Porque la página se cargó con ancho de escritorio y luego se recortó o se escaló. La maquetación la decide el ancho de la ventana, así que la página tiene que cargarse con ancho de móvil para mostrar la web para móvil.
9:16 para llenar la pantalla de un teléfono, como en Reels, TikTok y stories. 4:5 para una publicación en el feed. 1:1 si se puede mostrar en cualquiera de los dos.
Automatiza las grabaciones de webs con movimiento personalizable, controles inteligentes y opciones de exportación pensadas para creadores de hoy.
