Como ver e testar o site no modo celular no PC e no Mac

O atalho que abre o modo celular em cada navegador, como escolher o aparelho e os limites desse modo na hora de testar o seu site.

Atualizado em 5 de out. de 20263 min de leitura

Modo celularGalaxy S25 · 360 × 780

Todo navegador de computador tem um modo que encolhe a página para o tamanho de um celular. Ele é gratuito, já vem instalado e resolve a pergunta mais comum: o layout quebra numa tela estreita? Abaixo, o atalho de cada navegador, o passo a passo no Chrome e o que esse modo deixa de fora.

O atalho em cada navegador

Navegador	Windows	Mac
Chrome e Edge	`F12` e depois `Ctrl+Shift+M`	`⌥⌘I` e depois `⇧⌘M`
Firefox	`Ctrl+Shift+M`	`⌥⌘M`
Safari	não existe no Windows	`⌃⌘R`

No Safari, o modo só aparece depois de ligar os recursos de desenvolvedor: Ajustes do Safari › Avançado › Mostrar recursos para desenvolvedores da web. Depois disso, o menu Desenvolvedor ganha a opção Entrar no Modo de Design Responsivo.

Passo a passo no Chrome

Abra o site no Chrome. Pode ser o endereço publicado ou o seu servidor local, como localhost:5173.
Abra o DevTools com F12 no Windows ou ⌥⌘I no Mac.
Ligue a barra de dispositivo com Ctrl+Shift+M ou ⇧⌘M. A página encolhe e aparece uma barra no topo.
No menu de dimensões, escolha um aparelho da lista, como iPhone, Pixel ou Galaxy, ou deixe em Responsivo para arrastar a largura com o mouse.
Recarregue a página depois de trocar de aparelho. Alguns sites só leem o user agent no carregamento e continuam mostrando a versão de computador até recarregar.

O que o modo celular mostra

A largura e a altura da tela do aparelho escolhido, em pixels CSS.
A densidade de pixels, que deixa imagens e ícones com a nitidez certa.
O toque simulado: o cursor vira um círculo e a rolagem funciona como num celular.
O user agent do aparelho, que alguns sites usam para decidir o que mostrar.

Para a maior parte dos problemas de layout, como coluna que não quebra, texto que estoura ou menu que não cabe, isso já basta.

O que ele não mostra

A tela de verdade do celular. Não há moldura, status bar nem recorte da câmera. Um cabeçalho colado no topo parece certo no computador e fica embaixo da Dynamic Island no iPhone.
As safe areas. Os valores de env(safe-area-inset-*) ficam zerados, então não dá para conferir se o botão do rodapé fica atrás do indicador de início.
O app instalado. Um PWA aberto pela tela de início perde a barra do navegador e passa a responder a display-mode: standalone. O modo celular sempre mostra a página dentro do navegador.
O motor do aparelho. O Chrome usa o próprio motor em qualquer aparelho escolhido. Bugs que só acontecem no Safari do iPhone, que usa WebKit, não aparecem aqui.
O seu ritmo de trabalho. O modo fica dentro da aba e some quando o DevTools fecha. Com o editor em tela cheia, conferir uma mudança vira trocar de janela, abrir o DevTools e voltar.

Para conferir num celular de verdade

Se o celular estiver na mesma rede Wi-Fi do computador, dá para abrir o servidor local nele:

Inicie o servidor aceitando conexões da rede. No Vite, npm run dev -- --host. No Next.js, next dev -H 0.0.0.0.
Veja o endereço que aparece no terminal, como http://192.168.0.12:5173, e abra no navegador do celular.

Um detalhe: fora do localhost, o service worker só funciona com HTTPS. Para testar um PWA no celular por esse caminho, veja o guia Como testar um PWA.

Quando usar outra ferramenta

O modo celular do navegador é ótimo para uma olhada rápida. Ele fica curto quando você quer acompanhar o layout o tempo todo enquanto programa, conferir as safe areas ou ver o app instalado.

É para isso que existe o Breakpane: o aparelho fica flutuando na frente do editor, com a moldura, a status bar e as safe areas do modelo, e atualiza sozinho quando você salva. Para comparar todas as opções, de extensões ao Simulador do Xcode, veja Simulador de celular para testar site.