Rudra Analyzer

Verificador de compatibilidade com celular gratuito

Abra sua página em um navegador real nos tamanhos desktop, tablet e celular, veja uma captura de tela de cada um e descubra se ela está preparada para telas de celular ou se transborda pela lateral e obriga os visitantes a rolar para os lados.

Digite uma página, por exemplo https://seusite.com.br ou https://seusite.com.br/precos.

O que esta ferramenta verifica

  • Tag viewport

    Se a página tem uma meta tag viewport. Sem ela, os celulares mostram um layout de desktop reduzido com texto minúsculo.

  • Conteúdo mais largo que a tela

    Se a página fica mais larga que a tela em cada tamanho, o que causa rolagem lateral e conteúdo cortado.

  • Três tamanhos de tela

    Desktop (1280×800), tablet (768×1024) e celular (390×844), com as visualizações de tablet e celular emulando um navegador móvel.

  • Capturas de tela

    Uma captura da primeira tela em cada tamanho, para você ver o que os visitantes veem.

  • Problemas de carregamento

    Se a página falhou ou excedeu o tempo limite em algum dos tamanhos.

Como a verificação funciona

Carregamos sua página no Chromium três vezes, uma para cada tamanho de tela, esperamos o carregamento terminar e então medimos se a página é mais larga que a tela e fazemos uma captura de tela. As visualizações de tablet e celular usam emulação móvel com tela de alta densidade.

A pontuação começa em 100: a falta da tag viewport custa 20 pontos, cada tamanho de tela com transbordamento lateral custa 15 e problemas de carregamento custam 10.

Esta verificação rápida não mede o tamanho das áreas de toque, o tamanho da fonte nem elementos sobrepostos. Usuários com login podem fazer um teste de layout mais aprofundado em até oito perfis de dispositivo, que também procura esses problemas.

Problemas comuns que encontramos

  • Sem tag viewport

    Comum em sites antigos e páginas feitas à mão; a visualização no celular parece uma página de desktop encolhida.

  • Elementos com largura fixa

    Contêineres, tabelas ou conteúdos incorporados com largura fixa em pixels maior que a tela do celular.

  • Imagens e vídeos que não encolhem

    Mídias sem max-width: 100%, deixando a página mais larga que a tela.

  • Tabelas largas

    Tabelas de preços ou de comparação com muitas colunas.

  • Textos longos sem quebra

    URLs longas, endereços de e-mail ou código que não conseguem quebrar para a linha seguinte.

Como corrigi-los

  1. Adicione a tag viewport

    Coloque <meta name="viewport" content="width=device-width, initial-scale=1"> no head da página. A maioria dos temas modernos já inclui essa tag.

  2. Use larguras flexíveis

    Troque larguras fixas em pixels por max-width e porcentagens, e use CSS grid ou flexbox para que os layouts se reorganizem em telas pequenas.

  3. Faça as mídias encolherem para caber

    No seu CSS, aplique max-width: 100% e height: auto a imagens, vídeos e iframes.

  4. Deixe as tabelas largas rolarem dentro da própria caixa

    Envolva as tabelas em um contêiner com overflow-x: auto, ou empilhe as colunas em telas pequenas.

  5. Permita que palavras longas quebrem

    Use overflow-wrap: anywhere em áreas de texto que possam conter URLs longas.

Perguntas frequentes

O teste é feito em celulares reais?

Não. Ele usa um navegador Chromium real configurado com tamanhos de tela de celular e tablet e emulação móvel. Isso detecta problemas de layout com confiabilidade, mas não é idêntico a todos os celulares e navegadores, principalmente o Safari no iPhone.

É o mesmo que o Teste de compatibilidade com dispositivos móveis do Google?

Não. O Google desativou seu Teste de compatibilidade com dispositivos móveis em 2023. Nossa verificação analisa duas das causas mais comuns de um layout ruim no celular (a falta da tag viewport e conteúdo mais largo que a tela) e mostra capturas de tela.

Por que as capturas de tela mostram só o topo da página?

Capturamos a primeira tela em cada tamanho, que é o que os visitantes veem antes de rolar. Já a verificação de transbordamento mede a largura da página inteira.

Ele verifica a velocidade do meu site no celular?

Não. Para isso, use o verificador de velocidade: por padrão, o Lighthouse simula um celular intermediário em uma conexão móvel.

Minha pontuação é 100. Meu site está perfeito no celular?

Significa que a página tem uma tag viewport e que nada sai da tela nos três tamanhos que testamos. Botões pequenos demais para tocar ou texto pequeno demais para ler precisam de uma análise mais cuidadosa, ou do teste de layout mais aprofundado disponível para usuários com login.

Guias úteis

Ferramentas gratuitas relacionadas

Prefere que alguém corrija por você?

Estas verificações são gratuitas, assim como os guias. Se preferir que uma pessoa faça as mudanças, nossa equipe oferece ajuda paga.