Captura de tela da viewport
O que é uma captura de tela da viewport, em que ela difere da captura de página inteira e quando é a escolha certa.
Uma captura de tela da viewport registra apenas a parte da página da web visível na janela do navegador, a viewport, no tamanho e na posição de rolagem atuais. O conteúdo acima ou abaixo da área visível não é incluído. O tamanho da imagem é igual ao tamanho da viewport multiplicado pelo fator de escala do dispositivo, por exemplo 1920×1080 em 1x ou 3840×2160 em 2x.
No desenvolvimento web, a viewport é a área em que a página é renderizada, medida em pixels CSS. Ela exclui a interface do navegador, como a barra de abas e a barra de endereço. Uma captura da viewport mostra a página como um visitante a vê ao chegar, sem a interface do navegador ao redor.
Captura da viewport ou captura de página inteira
Uma captura da viewport mostra uma tela de conteúdo, a mesma que o visitante vê ao chegar. Uma captura de página inteira renderiza o documento inteiro, do topo à base, em uma única imagem. As capturas da viewport são menores, mais rápidas e mais fáceis de comparar. As capturas de página inteira mostram tudo, mas podem ser muito altas e podem quebrar layouts construídos em torno da altura da viewport.
Onde as capturas da viewport são usadas
- Verificação da primeira tela de uma landing page.
- Miniaturas e pré-visualizações de links.
- Testes de regressão visual focados no cabeçalho e na área principal.
- Verificações responsivas em tamanhos fixos de dispositivo.
Tamanhos de viewport e captura responsiva
A largura da viewport determina qual layout responsivo a página exibe. Uma viewport de 390 pixels de largura ativa o layout de celular, enquanto 1920 mostra o layout de desktop. O Website Capture do Temposhot oferece Desktop 1920×1080, Tablet 768×1024 e Mobile 390×844, com Area definida como Viewport ou Full page para cada URL.
Erros comuns com capturas da viewport
- Capturar antes de a página terminar de carregar ou de as animações pararem.
- Deixar um banner de cookies cobrindo a viewport.
- Esperar que o conteúdo abaixo da dobra apareça.
- Comparar capturas feitas com fatores de escala diferentes.
Repetindo as mesmas capturas o tempo todo?
Adicione as URLs ao Website Capture, defina Viewport e um dispositivo, e inicie uma execução com até 10 Concurrent browsers. Veja opções de captura.
Perguntas frequentes
O que significa "acima da dobra"?
O conteúdo visível sem rolar a página, que é o que uma captura da viewport mostra.
Uma captura da viewport inclui a barra de endereço?
Não. Ela contém apenas a página renderizada.
Fontes
Recursos relacionados
- Início rápido do Website Capture: primeira execução com uma lista de URLs.
- Opções do Website Capture: configurações de dispositivo, área e espera.
- Verificador de resolução de capturas de tela: verifica o tamanho da imagem.
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 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.
- Captura de tela responsivaO que são capturas de tela responsivas, os tamanhos de viewport mais usados e erros a evitar ao capturar em vários dispositivos.
- Captura de tela com rolagemO que é uma captura de tela com rolagem, em que ela difere da captura de página inteira e quando usá-la.
- Navegador headlessO que é um navegador headless, como ele é usado em capturas de tela automatizadas e quais armadilhas comuns evitar.
- Captura de telaO que significa captura de tela, os diferentes métodos de captura e como escolher o adequado.