Teste Responsivo — Verifique Cada Viewport | QA Proof Skip to main content
Teste Responsivo

Encontre o breakpoint que quebra sua página

O QA Proof renderiza sua página em larguras de desktop, tablet e mobile e reporta quebras de layout, conteúdo transbordando e touch targets pequenos demais para tocar.

Começar grátis Ver planos →

Plano gratuito disponível · Sem cartão de crédito

3 viewports testados
Desktop 1440px
95
Tablet 768px
78
Mobile 390px
92
Touch targets
88

Ninguém testa no tablet

A maioria dos times confere a página no próprio notebook e em um celular, e publica. As larguras intermediárias são justamente onde as coisas quebram em silêncio — um menu que quebra linha, uma tabela que transborda, um botão pequeno demais para o polegar. Os usuários acham isso antes de você.

Como funciona

1

Informe sua URL

Basta a URL de uma página — sem scripts, sem laboratório de dispositivos, sem extensões de navegador.

2

Renderizamos três viewports

Desktop, tablet e mobile são renderizados em um navegador real, nas larguras reais de cada dispositivo.

3

Veja o que quebrou

Cada viewport recebe sua própria nota, mais a lista de problemas de layout com media queries sugeridas.

O que verificamos em cada largura

Três viewports reais

Desktop, tablet e mobile renderizados nas larguras reais dos dispositivos — não uma janela de navegador espremida via CSS.

Validação de touch targets

Sinaliza qualquer elemento interativo abaixo do mínimo de 44×44px que as diretrizes exigem para um toque confiável.

Detecção de overflow de conteúdo

Pega rolagem horizontal, texto cortado e elementos empurrados para fora do viewport.

Recomendações de media query

Regras de breakpoint sugeridas para cada problema, prontas para entrar na sua folha de estilo.

Nota por viewport

Descubra de imediato qual largura é o ponto fraco, em vez de receber um número único e diluído.

Acesso via API

Dispare verificações de responsividade pelo CI para que um layout mobile quebrado nunca chegue à main.

Quem usa

Devs front-end

Pegue os problemas de breakpoint que você só acharia arrastando a janela do navegador para lá e para cá.

Engenheiros de QA

Cubra três viewports a cada release sem manter um laboratório de dispositivos.

Times de e-commerce

A maior parte do seu tráfego é mobile. Garanta que o checkout funciona de verdade por lá.

Perguntas frequentes

Por padrão, desktop em 1440px, tablet em 768px e mobile em 390px — as larguras que representam a maior parte do tráfego real. Cada uma é renderizada em um navegador real, não simulada por redimensionamento.
As diretrizes de acessibilidade definem um mínimo de 44×44px para elementos tocáveis porque alvos menores causam toques errados, principalmente para pessoas com limitações motoras. Touch targets pequenos também são um dos maiores destruidores de conversão no mobile.
Renderizamos em um motor de navegador real, nas larguras reais dos dispositivos, o que já pega problemas de layout, overflow e touch targets. Comportamentos específicos de hardware, como as peculiaridades da barra do Safari no iOS, ainda exigem um aparelho físico.
Cerca de 20 segundos para os três viewports.
As páginas precisam estar acessíveis publicamente para o renderizador conseguir carregá-las. Em ambientes de staging, libere nossas requisições em uma allowlist ou exponha a página em uma URL pública temporária.

Conheça o resto da plataforma

Fidelidade de Design Compare designs do Figma com suas páginas no ar, diferença por diferença. Auditoria de Acessibilidade Verificações de conformidade WCAG 2.1 com relatórios de violações e correções. Regressão Visual Comparações agendadas de capturas contra baselines aprovadas. Auditoria de Design Consistência de design tokens e o seu Design Debt Score.

Teste sua página em todos os viewports

Plano gratuito, sem cartão, três viewports em cerca de 20 segundos.

Começar grátis