O design responsivo visa manter um site utilizável em diversas larguras e orientações de janela de visualização. Testar apenas a largura de um desktop e de um telefone pode evitar problemas de estouro, quebra automática e navegação entre esses pontos. Este testador baseado em navegador redimensiona um iframe em sandbox para dimensões CSS predefinidas ou personalizadas, facilitando verificações visuais repetíveis. É uma ajuda para dimensionar a janela de visualização, não um substituto para testes em dispositivos reais, ferramentas de desenvolvedor de navegador ou verificações de acessibilidade.
Escolhendo e testando pontos de interrupção
Pontos de interrupção são decisões tomadas pelo conteúdo e layout de um site, e não por categorias universais de dispositivos. Os sistemas Tailwind, Bootstrap e Material usam limites diferentes, e um site pode precisar de limites adicionais ou menos. Teste as larguras definidas pelo CSS do projeto, além dos valores intermediários logo abaixo e acima de cada limite. Em cada largura, inspecione a navegação, colunas, quebra automática de texto, imagens, formulários e estouro horizontal. Este testador pode tornar essas verificações da janela de visualização repetíveis, mas não identifica pontos de interrupção nem julga se um layout está correto.
Predefinições vs testes de viewport personalizados
As predefinições são pares convenientes de largura e altura para alvos de revisão comuns. As dimensões personalizadas são melhores quando o CSS de um projeto usa pontos de interrupção específicos ou quando você precisa reproduzir um relatório de bug. O frame e o iframe são redimensionados, mas o testador não altera o agente do usuário do navegador, emula o DPR de um dispositivo real, desenha seu entalhe, fornece inserções de área segura, simula seu teclado ou reproduz o cromo do navegador móvel. Use emulação de dispositivo de navegador e dispositivos físicos quando esses comportamentos forem importantes e, em seguida, use este testador para comparações rápidas da janela de visualização.
Uma lista de verificação prática e responsiva de controle de qualidade
Use este testador como uma lista de verificação manual: carregue um URL permitido, verifique larguras estreitas, intermediárias e largas, gire alvos para dispositivos móveis e tablets e inspecione quebra automática de texto, imagens, formulários, navegação, elementos fixos e excesso horizontal. Um estado em branco ou de erro pode significar que o destino bloqueia a incorporação de iframe; não é prova de que o alvo em si esteja quebrado. O tamanho do alvo de toque, o acesso ao teclado, a visibilidade do foco, o comportamento do leitor de tela e os problemas do dispositivo real precisam de verificações separadas do navegador ou da tecnologia assistiva. Registre a largura, a altura, o zoom, o navegador e o URL de destino ao registrar um bug responsivo para que outra pessoa possa reproduzi-lo.