Como Ver a Versão Mobile de um Site no Chrome

Testar como uma página aparece em um celular não deveria exigir a posse de dez aparelhos. Este guia explica como ver a versão mobile de páginas de um site diretamente no seu navegador — usando a visualização mobile que o Chrome já inclui, além de uma extensão gratuita que se parece muito mais com um celular real.

Por que verificar a visualização mobile

Mais da metade de todo o tráfego da web é mobile, mas layouts que ficam perfeitos em um laptop muitas vezes quebram em telas menores: o texto transborda, os botões se sobrepõem, as imagens esticam. Saber como ver a versão mobile de um site antes dos seus visitantes evita más primeiras impressões e perda de conversões. Isso também ajuda no SEO, já que os buscadores classificam as páginas pelo desempenho no mobile.

Método 1: modo dispositivo do Chrome DevTools

A forma mais rápida de obter a visualização mobile no Chrome é o modo dispositivo do DevTools. Para abri-lo:

1. Abra o site no Chrome.
2. Clique com o botão direito na página e escolha Inspecionar (ou pressione F12).
3. Clique no ícone da barra de dispositivos, ou pressione Ctrl+Shift+M.
4. Escolha um tamanho de tela no menu suspenso no topo.
5. Atualize a página para que ela recarregue com o user-agent mobile.

É rápido e gratuito, mas tem limitações reais:

• Mostra apenas o viewport, sem quadro do dispositivo, barra de status ou interface realista do navegador.
• Não replica totalmente o Safari do iOS nem uma versão específica do Android.
• Comparar vários dispositivos lado a lado é trabalhoso.
• A interface foi feita para desenvolvedores, não para designers ou equipes de QA.

Método 2: Phone Simulator para uma visualização realista do dispositivo

Para uma prévia que realmente se pareça com um celular, extensões como o Phone Simulator funcionam melhor. Ele renderiza a aba atual dentro de um quadro de dispositivo real, com o viewport, o user-agent e a aparência do sistema corretos.

Com ele, você pode:

• Escolher entre mais de 40 dispositivos: iPhone, Samsung Galaxy, Pixel, iPad, laptops e mais.
• Alternar entre retrato e paisagem, além dos temas claro e escuro.
• Ver dois dispositivos ao mesmo tempo (até 8 no PRO) com rolagem sincronizada.
• Tirar capturas de tela e gravar a tela para compartilhar com sua equipe.
• Criar um dispositivo personalizado com qualquer tamanho, sistema, cor e user-agent.

Para começar:

1. Instale o Phone Simulator na Chrome Web Store.
2. Abra o site que você quer verificar e clique na extensão.
3. Selecione um dispositivo — a página carrega instantaneamente dentro de um quadro realista.
4. Troque de dispositivo ou de orientação para ver todos os layouts.

Tudo isso funciona no plano gratuito, então você pode testar seu site no mobile sem pagar nada.

Quando a visualização realista realmente ajuda

Um viewport simples serve para uma checagem rápida de largura, mas alguns casos exigem o cenário completo:

• Mostrar a um cliente uma visualização mobile do site que ele reconheça na hora como um celular.
• Verificar como um cabeçalho fixo fica sob um notch ou a barra de status.
• Revisar o modo escuro em um dispositivo específico.
• Capturar telas limpas para uma apresentação, uma listagem de loja ou documentação.

Qual método usar

Se você só precisa de uma checagem rápida de pixels enquanto programa, a visualização mobile do Chrome DevTools é suficiente. Se você quer ver o site como mobile do jeito que os usuários reais veem, comparar dispositivos ou capturar telas, o Phone Simulator é a melhor opção. Dominar as duas formas garante que você sempre tenha a ferramenta certa para cada tarefa.