Para testar um site no Android pelo computador, comece com uma visualização no tamanho de Android no Chrome do desktop e depois confirme no emulador do Android Studio ou num celular real conectado com a depuração USB. O Chrome do desktop se aproxima muito mais do Android do que do iPhone, porque o Chrome para Android usa o mesmo motor Blink. O emulador e o celular real acrescentam o que o Chrome do desktop não tem: a interface real do navegador, o teclado e o hardware mobile.
Por que o Android é mais fácil de imitar que o iPhone
No iPhone, o motor do navegador é quase sempre o WebKit, que o Chrome do desktop não usa. No Android, o navegador padrão da maioria das pessoas é o Chrome, construído sobre o mesmo motor do Chrome desktop. Então, quando você emula um celular Android no Chrome do desktop, o comportamento de CSS e JavaScript costuma ser o mesmo, e as diferenças principais ficam no tamanho de tela, na entrada, no desempenho e na interface do navegador.
O problema é a variedade. Celulares Android têm muitas larguras (geralmente de 360 a 412 pixels CSS na vertical), densidades de pixels e navegadores. O Samsung Internet, que vem instalado nos aparelhos Samsung, tem calendário de versões e configurações próprias, como um modo escuro forçado, que podem mudar a aparência de um site.
Passo 1: uma visualização no tamanho de Android no Chrome
Para conferir o layout, use qualquer uma destas ferramentas:
- Modo dispositivo do DevTools. Abra o DevTools, pressione
Ctrl + Shift + M(Cmd + Shift + Mno Mac), escolha um preset Pixel ou Galaxy e recarregue. O modo dispositivo emula eventos de toque e permite limitar CPU e rede. Passo a passo: guia do emulador mobile do Chrome. - Uma extensão de visualização mobile. O Mobile View Extension tem presets de Android e recarrega a aba atual com o user agent, o tamanho de tela e a densidade de pixels correspondentes, sem abrir o DevTools. É prático para percorrer muitas páginas rapidamente.
Teste pelo menos 360 px e 412 px de largura, além da horizontal.
Passo 2: o emulador do Android Studio
O Android Studio é o ambiente de desenvolvimento gratuito do Google para Android, disponível para Windows, macOS e Linux. Ele inclui um emulador que roda uma imagem completa do sistema Android.
- Instale o Android Studio e abra o Device Manager.
- Crie um dispositivo virtual. Escolha um perfil de celular e uma imagem do sistema com Google Play, para que o Chrome venha instalado.
- Inicie o dispositivo, abra o Chrome e digite sua URL.
Para acessar um servidor de desenvolvimento do seu computador a partir do emulador, use o endereço especial 10.0.2.2 em vez de localhost. Por exemplo, http://10.0.2.2:5173 chega a um servidor na porta 5173 da sua máquina. O emulador precisa da virtualização por hardware ativada na BIOS ou nas configurações do sistema para rodar numa velocidade aceitável.
Passo 3: um celular Android real com depuração remota
Um celular real mostra o desempenho e o comportamento de toque de verdade, e o Chrome permite inspecioná-lo pelo computador:
- No celular, abra Configurações > Sobre o telefone e toque sete vezes em Número da versão para ativar as opções do desenvolvedor.
- Em Opções do desenvolvedor, ative a Depuração USB.
- Conecte o celular por USB e aceite o aviso de depuração no aparelho.
- No computador, abra o Chrome e vá para
chrome://inspect/#devices. - Abra o site no Chrome do celular e clique em inspect ao lado dele no computador.
Você ganha o DevTools completo para a página rodando no celular, com espelhamento da tela ao vivo. A mesma página oferece Port forwarding, que mapeia uma porta do celular para o seu computador, de modo que localhost:3000 no celular abre seu servidor local. Mais em como acessar localhost pelo celular.
E um emulador Android online, no navegador?
Quem pesquisa “emulador android online” geralmente quer uma de duas coisas. Algumas pessoas querem um site que rode Android numa aba do navegador. Esses serviços existem: transmitem um emulador remoto ou um aparelho real e costumam ser pagos ou ter tempo limitado. Outras querem que o próprio Chrome se comporte como um celular Android, que é exatamente o que o modo dispositivo ou uma extensão de visualização mobile faz.
Para testar sites, a segunda opção quase sempre basta para o layout, e o emulador do Android Studio ou um celular real cobrem o resto. Serviços de transmissão remota são úteis quando você não pode instalar nada localmente.
O que conferir especificamente no Android
- Larguras de 360 e 412 px, os tamanhos mais comuns em celulares intermediários e topo de linha.
- O teclado na tela. Quando ele abre, a área visível diminui. Rodapés fixos e botões de chat podem cobrir campos de digitação.
- O botão e o gesto de voltar do sistema. Single-page apps devem tratar o histórico para que “voltar” faça o que o usuário espera.
- Modo escuro. O Samsung Internet e as configurações experimentais do Chrome podem escurecer páginas que não declaram um esquema de cores.
- Tamanho da fonte. Usuários de Android muitas vezes aumentam a fonte do sistema. Confira se o texto cresce sem quebrar o layout.
- Desempenho num aparelho intermediário. Use a limitação de CPU do DevTools ou um celular intermediário real; aparelhos topo de linha escondem JavaScript lento.
Para a lista completa antes do lançamento, veja o checklist de teste de site mobile.
Perguntas frequentes
A emulação de Android do Chrome é precisa?
Para layout e a maior parte do CSS e JavaScript, sim, porque o Chrome para Android usa o mesmo motor. É menos precisa em desempenho, gestos de toque e interface do navegador, então confirme os fluxos importantes num celular real.
Como abrir localhost no emulador Android?
Use 10.0.2.2 no lugar de localhost, mantendo a mesma porta, por exemplo http://10.0.2.2:3000.
Preciso do Android Studio só para testar um site?
Não. A maioria das conferências de layout funciona no Chrome do desktop. Vale instalar o Android Studio quando você precisa da interface real do navegador Android, do comportamento do teclado ou de uma versão específica do Android.