Rudra Analyzer

Verificador de compatibilidade com celular gratuito

Abra sua página em um navegador real nos tamanhos de celular, tablet e desktop e descubra se ela está preparada para telas de celular: se a tag viewport está correta, se as pessoas conseguem dar zoom e quais elementos transbordam para o lado e fazem os visitantes rolar a tela na horizontal.

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, se ela usa width=device-width e se bloqueia o zoom com user-scalable=no ou um maximum-scale menor que 2.

  • Conteúdo mais largo que a tela

    Se a página é mais larga que o aparelho em cada tamanho, medida em relação à largura real da tela, com até cinco dos elementos que ficam para fora e quanto eles passam.

  • Três tamanhos de tela

    Celular (375×667), tablet (768×1024) e desktop (1440×900), com as visualizações de celular e tablet emulando um navegador móvel.

  • Capturas de tela

    Uma captura da primeira tela no celular, além de uma captura de qualquer tamanho em que encontramos um problema.

  • 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, comparamos a largura da página com a largura real do aparelho e fazemos capturas de tela quando ajudam. Os navegadores móveis alargam o layout discretamente para caber conteúdo largo demais, então medimos em relação à largura do aparelho e não à viewport do próprio navegador, que esconderia o problema.

A pontuação começa em 100: a falta da tag viewport custa 20 pontos, uma viewport sem width=device-width 10, uma viewport que bloqueia o zoom 5, cada tamanho de tela com transbordamento lateral 15 e problemas de carregamento 10.

Esta verificação rápida não mede o tamanho das áreas de toque, o tamanho do texto nem elementos sobrepostos. Usuários com login podem executar um teste de layout mais completo em vários perfis de celular, tablet e desktop, que também procura campos de formulário pequenos o bastante para fazer o celular dar zoom e menus de navegação que saem da tela.

As evidências que você verá

Para cada tamanho de tela, você verá se foi aprovado e a largura da página que medimos. Os resultados de transbordamento indicam os elementos que ficam para fora (o seletor CSS e a largura deles em relação à largura da tela), os resultados de viewport citam sua tag exatamente e as capturas de tela mostram como o problema aparece.

O que esta ferramenta não verifica

  • Celulares reais e todos os navegadores

    Ela usa o Chromium com emulação móvel. O Safari no iPhone e navegadores Android mais antigos ainda podem se comportar de forma diferente.

  • Áreas de toque, tamanho do texto e sobreposição

    Botões pequenos demais, texto pequeno demais para ler e elementos que se cobrem precisam do teste de layout mais completo ou de uma análise manual.

  • Velocidade no celular

    A velocidade de carregamento no celular é medida pelo verificador de velocidade, não aqui.

  • Menus e interações

    Nada é tocado ou aberto, então menus, pop-ups e formulários não são testados.

Problemas comuns que encontramos

  • Sem tag viewport, ou uma que bloqueia o zoom

    Sites mais antigos muitas vezes não têm tag viewport, então os celulares mostram uma página de desktop encolhida; outros definem user-scalable=no, o que impede pessoas com baixa visão de dar zoom.

  • 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. Corrija a tag viewport

    Coloque '<'meta name="viewport" content="width=device-width, initial-scale=1"> no head da página e remova user-scalable=no e maximum-scale=1.

  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 não recebo uma captura de tela para cada tamanho?

Guardamos capturas da visualização no celular e de qualquer tamanho com problema, para que o relatório mostre o que importa. As capturas registram a primeira tela, mas 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 correta que permite zoom e que nada transborda 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 atenta, ou do teste de layout mais completo 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.

Ver opções de ajuda profissionalComo testamos e pontuamosTodas as ferramentas gratuitas