Como testar seu site no celular: um roteiro que você mesmo executa

"No meu celular está estranho" é um dos relatos mais difíceis de resolver, porque não diz o que está estranho. Este texto troca o relato vago por um roteiro: uma sequência fixa de conferências que você executa no seu aparelho, anotando o que falhou. No fim, você tem uma lista de problemas concretos — e uma lista concreta é resolvível.

Comece pelo aparelho, não pelo simulador

O navegador do computador tem um modo que imita telas de celular. Ele é útil e você vai usá-lo mais adiante, mas não substitui o teste real, e a própria documentação do Chrome DevTools é explícita: o modo dispositivo deve ser entendido como uma aproximação de primeira ordem de como sua página aparece e funciona num celular. Nele você não executa o código num celular — simula a experiência no computador. A documentação vai além e cita o motivo de fundo: há aspectos que a ferramenta nunca vai conseguir simular, porque a arquitetura dos processadores de celular é muito diferente da de um computador. Na dúvida, diz o texto, a melhor opção é rodar a página num aparelho de verdade.

Então a ordem é essa: primeiro o celular na sua mão, depois o simulador para entender o que você viu.

Preparo: dois minutos antes de começar

• Teste duas vezes: em aba anônima e na aba que você já usa. A aba anônima mostra o que um visitante novo vê. A aba normal, que guarda arquivos já baixados, mostra o que quem já esteve no site vê — e só ela revela página que não atualizou depois de uma alteração. As duas são público real; comparar as duas é o teste.
• Teste nas duas redes. Uma passada pela rede móvel e outra pelo Wi-Fi. As pessoas chegam pelos dois caminhos, e cada um expressa problemas diferentes.
• Tenha à mão o bloco de notas do próprio celular e o botão de captura de tela. Print vale mais que descrição.
• Se puder, repita depois em um aparelho de outra marca e em outro navegador. Dois aparelhos diferentes cobrem muito mais que um só.

O roteiro, em sete passos

1. Entrada pelo endereço digitado

Digite o endereço do site na barra, sem buscar no Google. Confira se o endereço começa com https:// e se não aparece aviso de segurança; para confirmar, toque no ícone ao lado do endereço e veja as informações da conexão. O desenho desse ícone muda conforme o navegador e a versão, então o que vale é o protocolo e a informação de conexão, não o formato do símbolo. Conte quantos segundos até você conseguir ler alguma coisa. Anote.

2. Rolagem lateral

Role a página inteira para baixo, uma tela por vez, tentando arrastar para o lado em cada uma. O que você procura é a página inteira deslizando — o texto e o cabeçalho saindo do lugar junto. Isso indica que algum elemento é mais largo que a tela e está empurrando o documento.

Um caso parecido não é defeito: uma tabela larga ou uma galeria que rola de lado sozinha, dentro da própria caixa, enquanto o resto da página fica parado. Esse comportamento costuma ser proposital e serve justamente para caber em tela pequena. Anote qual dos dois você viu, porque a diferença muda a correção.

3. Menu

Abra o menu. Feche o menu. Abra de novo e clique em cada item, voltando sempre ao início. Você está procurando três defeitos: menu que não abre, menu que abre e não fecha, e item que leva ao lugar errado ou a uma página de erro. Faça isso também com o celular deitado, na horizontal.

4. Botões e alvos de toque

Toque em cada botão importante com o polegar, não com a ponta da unha. Botões pequenos demais ou colados um no outro fazem o visitante errar o alvo e desistir. Preste atenção especial ao botão de WhatsApp, ao telefone e ao endereço: eles precisam abrir o aplicativo certo, com o número certo já preenchido.

5. Formulário, campo por campo

Este passo é fácil de pular, porque exige preencher tudo. Preencha o formulário inteiro como um visitante faria:

• Ao tocar no campo de e-mail, o teclado deve trazer a arroba. No campo de telefone, deve trazer os números. Se vier sempre o teclado de texto comum, anote o campo e o navegador usado: isso é sintoma, e a causa pode estar no tipo do campo, no inputmode ou no próprio navegador. Registre o que observou e peça a inspeção do campo, em vez de cravar a causa.
• Com o teclado aberto, confira se o campo em que você está digitando continua visível — e não escondido atrás do teclado.
• Envie com um erro de propósito: e-mail sem arroba, campo obrigatório vazio. A mensagem de erro precisa aparecer, dizer qual campo está errado e ser legível sem zoom.
• Envie corretamente e confira se a mensagem chegou de fato ao destino combinado. Formulário que exibe "enviado com sucesso" e não entrega nada é falha silenciosa: ninguém reclama, porque ninguém sabe que tentou falar com você.

6. Zoom e leitura

Dê o gesto de pinça para ampliar a página. Ela deve ampliar. Alguns sites bloqueiam esse gesto, e a MDN é clara sobre o custo disso: desabilitar o zoom impede pessoas com baixa visão de ler e entender o conteúdo, e as diretrizes de acessibilidade WCAG exigem no mínimo ampliação de 2×, com a boa prática sendo permitir 5×. Se o seu site não deixa ampliar, isso é um defeito a corrigir, não uma escolha de design.

7. Imagens e vídeos

Confira se as imagens carregam todas, se nenhuma aparece esticada ou cortada no meio do assunto principal, e se vídeos não começam sozinhos com som. Em tela pequena, uma foto cortada na altura errada muda o que a página comunica.

Agora sim, o simulador — para entender o que você viu

Com a lista de defeitos na mão, abra o site no computador e ligue o modo dispositivo do navegador. Ele serve bem para duas coisas que o celular não mostra:

• Testar várias larguras rapidamente. A barra de predefinições do DevTools traz larguras de 320, 375, 425, 768, 1024, 1440 e 2560 pixels. A de 320 é a mais estreita e costuma expor os problemas de transbordamento primeiro.
• Ver onde o layout muda. A opção "Mostrar consultas de mídia" desenha, acima da página, as barras com os pontos em que o layout troca de arranjo. Clicando entre eles você salta direto para cada faixa de largura.

Uma checagem técnica fecha o diagnóstico: o site precisa declarar a largura da tela. A recomendação registrada na MDN é <meta name="viewport" content="width=device-width">. Sem essa declaração, o celular renderiza a página numa janela virtual larga — o exemplo da própria documentação fala de uma tela de 640px exibindo uma página montada em 980px — e depois encolhe tudo para caber. O resultado é o site "com letra de formiga" que só melhora com zoom, e as regras de layout para telas estreitas nunca chegam a ser aplicadas.

O que fazer com a lista

Separe o que achou em duas colunas: impede o contato (formulário que não envia, botão de WhatsApp errado, menu travado) e incomoda (imagem cortada, espaçamento estranho). A primeira coluna vem antes de tudo na fila, porque cada dia com ela aberta é contato que não chega; a segunda entra na fila normal. O prazo de cada correção depende do que for encontrado — quem for consertar é que estima.

Se tudo funcionou mas a impressão foi de lentidão, o problema é outro e se mede de outro jeito — está em site lento no celular: o que medir antes de mexer. E se a intenção é transformar esse roteiro em hábito, junte-o com a revisão periódica do site publicado.