Três jeitos de capturar um site como ele aparece no celular: gravar o próprio celular, emular um celular no DevTools do Chrome ou renderizar a página na largura de celular a partir da URL.
Aviral LakhanpaulAtualizado em 3 min de leitura
Carregue a página na largura de celular para o site servir o layout mobile de verdade e capture isso. Você pode gravar a tela de um celular de verdade, emular um celular com a barra de dispositivos do DevTools do Chrome e gravar a janela, ou entregar a URL a uma ferramenta que lê a página na largura de celular e exporta direto um vídeo 9:16 ou 4:5. Nunca encolha uma gravação de desktop: isso é uma página de desktop pequena, não o site mobile.
Um site responsivo escolhe o layout pela largura da janela em que está. Na largura de desktop, você recebe o layout de desktop, seja qual for o formato em que recortar o vídeo depois. Para ter o botão de menu, as colunas empilhadas e as áreas de toque maiores do site mobile, a própria página precisa ser carregada na largura de um celular. Tudo o que vem abaixo são jeitos diferentes de fazer isso.
| Método | Bom para | Atenção a |
|---|---|---|
| Gravar a tela do próprio celular | Interação por toque real, aparelho real | Barra de status e notificações no quadro, rolagem no impulso do dedo |
| Barra de dispositivos do DevTools do Chrome | Páginas em localhost ou atrás de login | Gravar uma janela pequena, rolar à mão ou com script |
| Renderizar a URL na largura de celular | Páginas públicas, rolagem limpa e uniforme | Não alcança páginas privadas |
iPhone e Android têm um gravador de tela nativo nos ajustes rápidos. Ele captura o aparelho real, o que é honesto, e a rolagem, que é o problema: o polegar dá um impulso e a página desliza, e cada impulso sai diferente.
Abra o DevTools, ative a barra de dispositivos (⇧ ⌘ M no Mac, Ctrl Shift M no Windows) e escolha um celular na lista. A página recarrega nessa largura com um user agent de tela de toque e serve o layout mobile. Grave só essa área com um gravador de tela e deixe a rolagem por conta de um script; o guia de rolagem automática tem um.
Deixe o zoom da barra de dispositivos em 100% antes de gravar, senão o gravador captura uma cópia reduzida e o texto perde nitidez.
Cole o endereço na página inicial e escolha Celular, ou Tablet, no topo das configurações do vídeo. A página é carregada nessa largura nos nossos servidores, então o site responde com o layout que realmente serve ali, e as proporções que combinam com um celular ficam disponíveis: 9:16, 4:5 e 1:1.
Um vídeo mobile renderizado ou gravado é só a tela. Para mostrá-lo dentro de um iPhone ou de um Pixel, coloque o vídeo num dispositivo em um app de mockup ou num template de um editor de vídeo. Exporte em 9:16 para ele preencher a tela do aparelho sem faixas.
Cole um link e veja a prévia da rolagem de graça. 51 créditos grátis ao criar a conta, sem cartão e sem marca d’água em nada que você exportar.
Use a barra de dispositivos do DevTools do Chrome para carregar a página na largura de um celular e grave essa área. Ou cole a URL numa ferramenta que lê a página na largura de celular e exporta o vídeo direto.
Porque a página foi carregada na largura de desktop e depois recortada ou redimensionada. O layout é escolhido pela largura da janela, então a página precisa ser carregada na largura de celular para mostrar o site mobile.
9:16 para preencher a tela do celular, como em Reels, TikTok e stories. 4:5 para um post no feed. 1:1 se ele puder aparecer em qualquer um dos dois.
Automatize gravações de sites com movimento personalizável, controles inteligentes e opções de exportação pensadas para criadores de hoje.
