Testador de Compatibilidade Móvel

O que o testador verifica

Configuração da viewport

• Existe um <meta name="viewport" content="width=device-width, initial-scale=1">? Sem ele, navegadores móveis renderizam como se o telefone tivesse largura de desktop e encolhem para caber, produzindo texto pequeno.

Tamanho do texto

• Qualquer texto renderizado abaixo de 12 px é sinalizado, difícil de ler no telefone sem zoom.
• Muitos guias de estilo recomendam um mínimo de 16 px para o corpo. Legendas muito pequenas são aceitáveis; texto do corpo a 11 px não é.

Tamanho do alvo de toque

• Botões, links, controles de formulário devem ter pelo menos 48×48 px (diretriz de acessibilidade móvel do Google / W3C).
• Alvos menores são difíceis de acertar com precisão com o polegar e são sinalizados.

Espaçamento do alvo de toque

• Alvos mais próximos que 8 px de alvos adjacentes produzem toques errados. Sinalizados individualmente.

Rolagem horizontal

• Conteúdo mais largo que a viewport força um deslizar horizontal, má experiência móvel. Geralmente causado por uma imagem sem max-width: 100% ou uma tabela que não pode se reformatar.

Plugins não suportados

• Flash, Silverlight e ActiveX não funcionam em telefones. Sites legados às vezes ainda os referenciam.

Carregamento de fonte

• Fontes da web muito grandes que bloqueiam a renderização por segundos são sinalizadas.

Por que ainda importa

O Google descontinuou seu Teste de Compatibilidade Móvel autônomo em dezembro de 2023, mas a compatibilidade móvel continua sendo um sinal de classificação direto via Core Web Vitals e métricas de experiência de página. A indexação móvel-primeiro significa que o Google rastreia seu site como um telefone; o que quebra no móvel também aparece nas classificações de desktop.

Correções típicas

• Adicione meta viewport ao <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.
• CSS responsivo via consultas de mídia: @media (max-width: 768px) { ... }.
• Flexbox e Grid em vez de layouts de largura fixa.
• Defina max-width: 100%; height: auto para imagens para que as imagens encolham com a viewport.
• Torne tabelas roláveis em telas pequenas: envolva em <div style="overflow-x: auto">.
• Use rem ou em para dimensionamento de texto para que a escala de preferência do usuário funcione.

O que o testador não captura

• Desempenho em hardware real. Um telefone Android de baixo custo em 3G experimenta atrasos que este testador não simula. Use o Lighthouse para desempenho.
• Interações de toque. Dropdowns que funcionam apenas com hover que quebram ao toque precisam de testes manuais em um dispositivo real.
• Acessibilidade além do dimensionamento móvel. Contraste, suporte a leitores de tela, navegação por teclado, use ferramentas de acessibilidade dedicadas.
• Erros de JavaScript em navegadores móveis específicos. O Safari no iOS às vezes se comporta de maneira diferente de outras versões do WebKit.