Um site normalmente aparece diferente no celular por um de três motivos: o layout se adapta à tela mais estreita (esperado), o celular recebe outra versão da página (cache, detecção de dispositivo ou plugins) ou o navegador e as configurações do celular renderizam de outro jeito (motor do Safari, modo escuro, tamanho da fonte). Descubra primeiro em qual dos três casos você está, porque as correções não têm nada em comum.
Primeiro, reproduza no computador
Abra a mesma URL numa visualização mobile no computador: o modo dispositivo do Chrome DevTools ou uma extensão de visualização mobile como o Mobile View Extension, que recarrega a página com user agent mobile e tamanho de tela de celular.
- Também fica errado na visualização mobile? É um problema de layout ou de conteúdo. Comece pelas causas 1–4.
- Fica certo na visualização mobile, mas errado no celular? É um problema de entrega ou de navegador. Comece pelas causas 5–11.
Causas de layout e conteúdo
1. A meta tag viewport está faltando ou errada
Sem <meta name="viewport" content="width=device-width, initial-scale=1">, o celular renderiza a página como um desktop de cerca de 980 px e reduz tudo, então fica minúsculo. Com um valor errado, como um width=1024 fixo, a página é escalada de forma estranha. Veja a meta tag viewport explicada.
2. Algo é mais largo que a tela
Um único elemento com largura fixa (uma tabela, um embed, uma URL longa, uma imagem sem max-width: 100%) faz a página inteira rolar para o lado, e alguns navegadores diminuem o zoom para encaixá-lo. Encontre-o no DevTools verificando quais elementos têm scrollWidth maior que a viewport.
3. Os breakpoints trocam o layout numa largura inesperada
Seu celular na horizontal pode ser mais largo do que você imagina, ou um tablet pode cair no lado desktop de um breakpoint de 768 px. Confira a largura real do aparelho na tabela de tamanho da tela do iPhone e revise seus breakpoints.
4. Conteúdo escondido ou reordenado no mobile
Construtores de página e CSS muitas vezes escondem seções com display: none em larguras pequenas ou reordenam colunas. É uma decisão de design, mas é fácil esquecer que ela existe. Confira as configurações de visibilidade só para mobile.
Causas de entrega: o celular recebe outra página
5. O cache entrega uma versão antiga
O navegador do celular pode estar guardando CSS antigo, ou seu CDN ou plugin de cache pode manter um cache mobile separado que não foi limpo. Limpe o cache do site e do CDN e recarregue no celular numa aba anônima.
6. A detecção de dispositivo entrega outro template
Alguns temas, plugins e servidores verificam o user agent e entregam outro HTML para celulares. Uma janela de navegador no desktop, mesmo estreita, nunca vê essa versão. Uma visualização mobile que envia um user agent mobile real vê. Como os user agents funcionam está em o que faz um user agent switcher.
7. Anúncios, testes A/B e personalização
Espaços de anúncio, experimentos e conteúdo por localização podem variar por aparelho ou visita. Teste deslogado, numa aba anônima, com os experimentos desativados se a sua ferramenta permitir.
Causas de navegador e configurações: o celular renderiza diferente
8. O motor do Safari se comporta de outro jeito
Todos os navegadores do iPhone usam basicamente o WebKit. As diferenças aparecem em controles de formulário, position: sticky dentro de contêineres com overflow, 100vh com a barra de endereço que recolhe (use 100dvh) e recursos novos de CSS. Teste no Safari do iOS pelo Simulator do Xcode ou num aparelho real; veja testar no iPhone.
9. O navegador aplica modo escuro
Alguns navegadores, como o Samsung Internet, podem forçar cores escuras em páginas que não declaram o próprio esquema de cores. Logos com fundo transparente e cores fixas no código ficam ilegíveis. Declare color-scheme e ofereça um tema escuro com prefers-color-scheme, ou defina cores claras explicitamente.
10. Fontes e tamanho do texto mudam
Se uma fonte web não carrega, o celular usa a fonte do sistema, que tem larguras diferentes, e o texto quebra de outro jeito. Os usuários também podem aumentar o texto nas configurações do navegador ou de acessibilidade do sistema, e navegadores mobile às vezes aumentam o texto sozinhos na horizontal. Use unidades relativas, deixe o texto quebrar linha e defina text-size-adjust: 100% se o aumento automático atrapalhar.
11. Recursos do navegador mudam a página
Bloqueadores de conteúdo, modos de economia de dados, modo leitura e tradução podem mudar o que o visitante vê. Se só uma pessoa relata um layout estranho, pergunte qual navegador e quais recursos ela usa antes de refazer qualquer coisa.
Uma tabela rápida de diagnóstico
| Sintoma | Causa mais provável |
|---|---|
| Tudo minúsculo, precisa dar zoom | Falta a tag viewport (1) |
| A página rola para o lado | Elemento mais largo que a tela (2) |
| Certo na prévia, design antigo no celular | Cache (5) |
| Design totalmente diferente no celular | Detecção de dispositivo ou tema mobile (6) |
| Só quebra no iPhone | Diferença do Safari/WebKit (8) |
| Cores invertidas ou logo invisível | Modo escuro forçado (9) |
| Texto quebra diferente, botões estouram | Fonte reserva ou escala do texto (10) |
Como evitar da próxima vez
Confira páginas novas numa visualização mobile durante o desenvolvimento, não depois do lançamento, e mantenha um checklist curto para cada entrega. O checklist de teste de site mobile traz um. Para correções específicas de WordPress, veja como deixar um site WordPress responsivo.
Perguntas frequentes
Por que meu site aparece diferente no celular e na visualização mobile do Chrome?
A visualização mobile do Chrome usa o motor do Chrome e os arquivos em cache do seu computador. O celular pode usar o motor do Safari, ter outros arquivos em cache ou um cache mobile do CDN, ou aplicar modo escuro ou escala de texto.
Por que meu site WordPress fica diferente no celular?
As causas mais comuns são configurações do construtor de páginas aplicadas só no tamanho desktop, um plugin de cache entregando um cache mobile antigo e temas ou plugins que entregam um layout mobile separado.
Por que meu site aparece reduzido no celular?
Geralmente falta a meta tag viewport, ou algum elemento é mais largo que a tela e o navegador diminui o zoom para encaixá-lo.