Captura de tela responsiva
O que são capturas de tela responsivas, os tamanhos de viewport mais usados e erros a evitar ao capturar em vários dispositivos.
Uma captura de tela responsiva é a captura de uma página da web renderizada em uma largura e altura específicas de viewport, geralmente feita como um conjunto em vários tamanhos. Sites responsivos usam media queries CSS, container queries e layouts flexíveis, então a mesma URL pode mostrar uma navegação, um número de colunas e um recorte de imagem diferentes em cada largura.
Um navegador só produz o layout de celular quando a própria viewport é estreita. Reduzir uma captura de desktop não muda o layout. Por isso, as ferramentas definem o tamanho da viewport, e muitas vezes o fator de escala do dispositivo e o user agent, antes de a página carregar.
Por que as capturas responsivas importam
Revisões de design, aprovações de clientes e QA precisam de evidências de como a página aparece em cada breakpoint. Um erro de layout costuma aparecer em apenas uma largura, como um menu que sobrepõe o logotipo em tablets. Um conjunto de capturas em tamanhos fixos torna esses erros visíveis em uma única revisão.
Tamanhos de viewport comuns
| Classe | Exemplo de viewport |
|---|---|
| Desktop | 1920×1080, 1440×900, 1366×768 |
| Tablet | 768×1024 na orientação retrato |
| Celular | 390×844, 360×800 |
Os tamanhos são em pixels CSS. Um celular com escala 3x renderiza 390×844 pixels CSS com 1170×2532 pixels físicos.
Como capturar telas responsivas
- No navegador, abra as ferramentas de desenvolvedor, ative o modo de dispositivo e escolha um tamanho.
- Em código, defina a viewport no Playwright ou no Puppeteer antes da navegação.
- No Website Capture do Temposhot (Command+2), escolha um Device: Desktop 1920×1080, Tablet 768×1024 ou Mobile 390×844. Cada linha de URL pode ter seu próprio device e sua própria Area, e o Render preview mostra uma linha antes da execução completa.
Erros comuns com capturas responsivas
- Redimensionar uma captura de desktop em vez de renderizar na largura de destino.
- Misturar capturas de viewport e de página inteira em um mesmo conjunto de comparação.
- Deixar um banner de cookies cobrindo metade do layout de celular.
- Comparar capturas feitas com fatores de escala diferentes.
Repetindo as mesmas capturas o tempo todo?
Adicione cada URL uma vez por dispositivo no Website Capture e execute a lista em uma única passagem. Veja opções de captura.
Perguntas frequentes
Uma captura responsiva é o mesmo que uma captura mobile?
Não. Uma captura mobile tem um único tamanho. Capturas responsivas são um conjunto em vários tamanhos.
Preciso de um celular real?
Para verificar o layout, um navegador na viewport de celular geralmente basta. Bugs específicos de dispositivo ainda exigem um dispositivo real.
Fontes
Recursos relacionados
- Início rápido do Website Capture: primeira execução com uma lista de URLs.
- Execuções e resultados: estados das linhas e novas tentativas.
- Calculadora de proporção de aspecto: verifica as proporções de um tamanho.
Você tira as mesmas capturas de tela várias vezes?
O Temposhot captura uma tela, janela ou área em intervalos programados e exporta o conjunto como PDF, imagens, ZIP ou MP4. As ferramentas gratuitas do navegador capturam apenas uma imagem por vez.
Recursos relacionados
Termos relacionados
- Captura de tela da viewportO que é uma captura de tela da viewport, em que ela difere da captura de página inteira e quando é a escolha certa.
- Captura de página inteiraO que é uma captura de página inteira, em que ela difere das capturas da viewport e de rolagem e quando usá-la.
- Device mockupO que é um device mockup, como posicionar capturas de tela em molduras de dispositivos e onde as equipes os usam.
- Captura de tela em loteO que são capturas de tela em lote, em que diferem das capturas individuais e onde equipes as usam.