Dá para ver a versão mobile de um site no computador de quatro jeitos: estreitar a janela do navegador, usar o modo dispositivo do Chrome DevTools, instalar uma extensão de visualização mobile ou abrir a página num emulador de celular. O primeiro é rápido, mas muitas vezes engana. Os outros três pedem ao site o layout mobile de verdade, que é o que você normalmente quer.
Qual serve depende do motivo. Quem faz design e confere espaçamentos precisa de algo diferente de quem faz marketing e quer ver o que os clientes veem no iPhone, ou de quem desenvolve e está atrás de um bug que só acontece no Android.
Por que uma janela estreita não é a versão mobile
Arrastar a borda da janela deixa a viewport mais estreita, as media queries do CSS disparam e um layout responsivo se reorganiza. Essa parte funciona. O que não muda é todo o resto que o site sabe sobre o seu aparelho.
Um celular envia uma string de user agent mobile e client hints como Sec-CH-UA-Mobile: ?1. Ele informa ao JavaScript uma tela pequena, alta densidade de pixels e suporte a toque. Alguns sites usam esses sinais para entregar outra página, um subdomínio m. separado, imagens mais leves ou outro menu. Uma janela estreita no desktop não envia nada disso, e você pode acabar vendo uma página de desktop espremida.
Há também um limite prático: o Chrome no desktop normalmente não deixa reduzir a janela muito abaixo de 500 pixels, enquanto muitos celulares têm viewport de 360 a 440 pixels CSS.
Método 1: modo dispositivo do Chrome DevTools
O Chrome tem um emulador de celular embutido. Abra o DevTools com F12 (ou Cmd + Option + I no Mac) e pressione Cmd + Shift + M no Mac ou Ctrl + Shift + M no Windows para ativar a barra de dispositivos. Escolha um aparelho na lista Dimensions e recarregue a página.
O modo dispositivo muda a viewport, a densidade de pixels e o user agent, e pode passar a usar eventos de toque. Ele também limita rede e CPU, o que ajuda a testar velocidade. O Google o descreve como uma “aproximação de primeira ordem” de um celular, porque o processador e o navegador do seu computador continuam sendo de desktop.
O ponto fraco é o trabalho extra. O DevTools ocupa um terço da tela, os presets são genéricos e é preciso configurar tudo de novo em cada aba. O processo completo está no guia do emulador mobile do Chrome.
Método 2: uma extensão de visualização mobile
Uma extensão de visualização mobile faz o mesmo trabalho essencial a partir de um botão na barra de ferramentas, sem abrir o DevTools. O Mobile View Extension para Chrome, por exemplo, recarrega a aba atual dentro de uma moldura de celular ou tablet com o user agent, as dimensões de tela e a densidade de pixels do aparelho. Você escolhe um preset Apple ou Android pelo nome, alterna entre vertical e horizontal e salva um print PNG da tela com moldura.
É a opção mais rápida quando você confere páginas com frequência, revisa o site de um cliente ou quer ver uma página “como no celular” enquanto continua navegando. A prévia continua ativa enquanto você navega e funciona em localhost.
Há limites que vale conhecer. A prévia roda num frame dentro do Chrome do desktop, então eventos de toque não são gerados e você continua usando o mouse. As media queries hover e pointer não são totalmente emuladas. Para gestos de toque ou desempenho em hardware real, use um celular de verdade. Os prós e contras das duas abordagens estão em extensão de simulador mobile ou DevTools.
Método 3: um emulador ou simulador de celular
Quando você precisa do navegador mobile real, e não do Chrome do desktop fingindo ser um, use um emulador:
- Simulator do Xcode (só macOS): roda o Safari real do iOS. É o mais perto de um iPhone sem ter um. Veja como testar um site no iPhone.
- Emulador do Android Studio: roda Android com Chrome no Windows, macOS ou Linux. Veja como testar um site no Android.
Os dois são gratuitos, pesados para baixar e levam minutos para iniciar. São a ferramenta certa para bugs específicos de um motor, como um layout que só quebra no Safari.
Método 4: pedir o site mobile diretamente
Alguns sites antigos ainda mantêm um site mobile separado num endereço como m.example.com. Digitar esse endereço num navegador de desktop muitas vezes mostra as páginas mobile direto. Sites modernos raramente funcionam assim, e muitos redirecionam visitantes de desktop de volta para o domínio principal, então trate isso como um atalho para sites específicos, não como um método.
Qual método usar
| Objetivo | Melhor método | Por quê |
|---|---|---|
| Olhar rápido como uma página aparece no celular | Extensão de visualização mobile | Um clique, user agent mobile real, continua ativa enquanto você navega |
| Depurar CSS ou JavaScript num layout mobile | Modo dispositivo do DevTools | Os painéis Elements, Console e Network ficam ao lado da prévia |
| Conferir um bug que só existe no Safari | Simulator do Xcode ou iPhone real | Só o WebKit mostra bugs do WebKit |
| Medir a velocidade no mobile | Limitação do DevTools ou teste de velocidade do site no celular | Hardware de desktop esconde scripts lentos |
| Conferir áreas de toque e gestos | Um celular real | Cliques de mouse não reproduzem polegares |
O que olhar depois de abrir a versão mobile
Abrir a visualização mobile é a parte fácil. A parte útil é um checklist curto:
- O texto é legível sem zoom, e o texto principal tem pelo menos 16 px.
- Nada rola para o lado. Uma barra de rolagem horizontal geralmente indica um elemento de largura fixa ou uma tabela larga.
- O menu abre, fecha e pode ser usado com o polegar.
- Botões e links estão afastados o suficiente para tocar.
- Os formulários mostram o teclado certo e não ficam cobertos por barras fixas.
- As imagens ficam nítidas em telas de alta densidade sem pesar demais.
Para uma lista mais completa antes do lançamento, use o checklist de teste de site mobile.
Perguntas frequentes
Dá para ver a versão mobile de um site no Chrome sem extensão?
Sim. Abra o DevTools e ative a barra de dispositivos com Ctrl + Shift + M (Cmd + Shift + M no Mac). Uma extensão poupa esses passos e mantém a configuração por aba.
Diminuir o zoom ou redimensionar a janela mostra o site mobile?
Redimensionar mostra como um layout responsivo se reorganiza naquela largura. Isso não envia um user agent mobile, então sites que detectam o aparelho continuam entregando a versão desktop.
A visualização mobile no computador é exatamente o que o celular mostra?
Chega perto, mas não é idêntica. Ferramentas de desktop mudam a viewport e os sinais que o site lê. Elas não mudam o motor de renderização, o processador nem a entrada por toque. Para a conferência final, abra a página num celular real.