Como usar: Simulador de Dispositivos
- Digite o endereço do seu site e clique em Visualizar.
- Escolha um tamanho de celular, tablet, notebook ou desktop e use Girar para o modo paisagem.
- Use Comparar para ver as versões de celular, tablet e notebook lado a lado.
- Adicione seus próprios tamanhos em Adicionar dispositivo personalizado. Eles ficam salvos neste navegador.
O que este simulador mostra
Ele carrega sua página na largura e altura de um dispositivo, então seu layout responsivo e os breakpoints de CSS se comportam como fariam naquele tamanho. Isso ajuda a identificar rapidamente layouts quebrados, textos cortados e tabelas que vazam da tela.
O que ele não consegue mostrar
Não é um aparelho de verdade. Ele não troca o motor do navegador, então um tamanho de iPhone aqui continua rodando no seu próprio navegador. Recursos que dependem do user agent ou do hardware de toque podem se comportar de forma diferente. Antes de lançar, teste em celulares reais ou use o modo de dispositivo do seu navegador para mais detalhes.
Por que alguns sites aparecem em branco
Muitos sites enviam X-Frame-Options ou uma regra frame-ancestors, que impede que sejam carregados dentro de outra página. Quando a ferramenta detecta isso, mostra uma captura de tela real no tamanho do dispositivo, para que você ainda consiga conferir o layout, mas links e rolagem não funcionam. Para capturas da página inteira, use a ferramenta Screenshot de Site para Mobile.
As medidas dos dispositivos são exatas?
Os tamanhos são valores comuns de viewport em pixels CSS, não a resolução física. Os navegadores reais perdem parte da altura com as barras de ferramentas, então use os valores como uma referência aproximada.
Também pesquisado como: teste de site responsivo, simulador de iphone online, testar site em celular, teste de responsividade, visualizar site no tablet, simulador de tela mobile, testar layout responsivo.
Ferramentas que combinam com: Simulador de Dispositivos
- Screenshot de Site — Informe uma URL e receba um screenshot de página inteira feito em um navegador Chrome real, em largura de desktop, tablet ou celular e com resolução de até 3× (Retina), com banners de cookies ocultos.
- Resolução da Tela — Os tamanhos da sua tela e da janela do navegador em pixels CSS, a razão de pixels do dispositivo e a resolução física real, medidos ao vivo pelo seu navegador.
- Teste de Touch Screen — Toque na área abaixo para ver cada dedo que sua tela detecta.
- Teste de Velocidade de Página — Rode o Google Lighthouse em qualquer URL para mobile ou desktop.