Pular para o conteúdo
PRONAFACE
Acesso
Grupo OTB Logo

Desenvolvimento e dados

Verificador de responsividade

Diagnóstico estático de HTML/CSS mais prévia visual em 6 viewports (mobile, tablet, laptop, desktop).

Não armazenamos os valores que você consulta. Resultados são informativos e devem ser confirmados nas fontes oficiais quando necessário.

Informe o site

Analisamos o HTML raiz e o CSS externo referenciado. A prévia multi-viewport usa <iframe>: alguns sites bloqueiam esse carregamento por segurança.

Endereços privados (localhost, IPs internos) não são aceitos.

Sem análise ainda

Digite um endereço acima e clique em Analisar responsividade.

Este relatório é um diagnóstico preliminar

Análise baseada no HTML raiz e amostra de CSS externo. Para QA completo, teste em dispositivos reais e valide acessibilidade (tap targets, contraste, foco, teclado). Se quiser um redesign responsivo, fale com a Appmart.

Como funciona a prévia multi-viewport?

Renderizamos o site em <iframe> nas larguras 320, 375, 430, 768, 1024 e 1440px. Isso reflete como o CSS do próprio site se comporta em cada tamanho, nada é rescalonado no servidor. Se o site bloqueia iframe (X-Frame-Options / CSP frame-ancestors), a prévia não carrega e informamos o motivo.

Quais problemas o diagnóstico textual detecta?

Meta viewport (obrigatório para mobile), presença e quantidade de media queries, framework CSS responsivo (Tailwind/Bootstrap/etc.), larguras fixas em px que podem causar rolagem horizontal, cobertura de srcset/sizes nas imagens, declaração de width+height (para evitar CLS), lazy loading e volume de elementos interativos.

O diagnóstico substitui um teste manual em dispositivos reais?

Não. É um diagnóstico preliminar. Testes em dispositivos reais e QA visual completo continuam necessários, especialmente para checar tap targets (WCAG 2.5.5 recomenda ≥44×44px), gestos, teclado virtual, orientação e desempenho em conexões lentas.

Meu site não carrega na prévia. Por quê?

Sites com X-Frame-Options: DENY/SAMEORIGIN ou CSP frame-ancestors restrito bloqueiam propositalmente carregamento em iframes de outros domínios. Isso é uma boa prática de segurança contra clickjacking. Use o diagnóstico textual e as ferramentas nativas do navegador (DevTools > modo dispositivo).

Fonte: MDN: Responsive design · web.dev: Responsive design basics · WCAG 2.5.5: Target Size

Ferramentas relacionadas

Sua empresa precisa de uma ferramenta, aplicativo ou sistema personalizado?

O Grupo OTB desenvolve sites, apps, plataformas e automações sob medida, do MVP à operação em escala.

Falar com um especialista

O que é essa ferramenta

Teste gratuito de responsividade que analisa se um site funciona bem em celular, tablet e desktop. Verifica meta viewport, media queries no CSS, tamanho de tap targets, imagens responsivas, fontes escaláveis e integra com Google PageSpeed Insights para métricas Core Web Vitals em mobile.

Como usar em poucos passos

  1. 1Informe a URL do site.
  2. 2Aguarde a análise dos elementos técnicos (viewport, breakpoints, imagens, tap targets).
  3. 3Confira o resultado do PageSpeed em mobile (LCP, CLS, INP).
  4. 4Corrija os itens marcados: geralmente meta viewport ausente, imagens fixas em px ou botões pequenos demais.
  5. 5Reteste após deploy das correções.

Para quem serve

Donos de site

Verificar se o site novo passa no teste mobile-friendly antes de investir em tráfego pago.

Designers e agências

Auditar entregáveis para garantir que responsividade não é só 'largura fluida': inclui tap targets, tipografia e imagens.

Times de SEO

Google usa mobile-first indexing: problemas de responsividade afetam ranking direto no mobile e derrubam a versão desktop também.

Perguntas frequentes

Meu site tem tema WordPress responsivo, preciso testar?
Sim. Muitos temas 'responsivos' quebram com plugins, imagens antigas ou personalizações. Testar é a única forma de confirmar.
Qual o tamanho mínimo de tap target?
Google e Apple recomendam 48x48 CSS px (aproximadamente 48px físicos). Botões menores geram cliques errados em telas touch.
PageSpeed baixo significa site não responsivo?
Não necessariamente. PageSpeed mede performance. Responsividade é layout. Um site pode ser responsivo e lento, ou rápido e não responsivo. Ambos importam.
AMP ainda é necessário?
Não. Desde 2021, Google removeu preferência por AMP. Site tradicional bem otimizado (bom LCP, CLS, INP) rankeia igual ou melhor.
O que é mobile-first indexing?
Google indexa e rankeia baseado na versão mobile do site. Se sua versão mobile tem menos conteúdo que a desktop, você perde posições.

Limitações honestas

  • Screenshots multi-device requerem renderização: nem todos os sites permitem crawling anônimo.
  • Não testa gestos complexos, orientação landscape específica ou PWA offline.
  • PageSpeed depende da disponibilidade da API pública do Google.

Categoria: Desenvolvimento e dados · Conteúdo revisado pelo time do Grupo OTB. Ferramenta gratuita, sem cadastro obrigatório.