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.
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
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.
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.
Faça as mídias encolherem para caber
No seu CSS, aplique max-width: 100% e height: auto a imagens, vídeos e iframes.
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.
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
- Verificador de velocidade do siteCarregue sua página em um navegador real com o Lighthouse e veja com que rapidez ela mostra o conteúdo e responde.Abrir Verificador de velocidade do site
- Verificador de acessibilidadeTeste sua página com o axe-core em busca de barreiras comuns, como rótulos ausentes, baixo contraste e imagens sem descrição.Abrir Verificador de acessibilidade
- Auditoria de siteVerifique uma página quanto a SEO, velocidade, celular, acessibilidade, segurança, links quebrados e problemas de servidor em um único relatório.Abrir Auditoria de site
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.