Simulador de Resolução de Tela Grátis
Este simulador de resolução de tela grátis mostra seu próprio tamanho de tela e tamanho da janela do navegador, e visualiza qualquer página da web na largura de um celular, tablet, laptop ou desktop. Escolha um dispositivo ou digite uma largura, cole um endereço de página e a página carrega em um frame nesse tamanho. Uma tabela de tamanhos de dispositivos comuns funciona mesmo sem JavaScript.
Screen Resolution Simulator
Domain and Server
Sobre esta ferramenta
Uma página que parece correta no seu laptop pode quebrar em um celular pequeno, e a única forma honesta de saber é vê-la nessa largura. Esta ferramenta carrega sua página em um frame na largura que você escolher, para que você possa verificar menus, imagens e botões em 360, 390, 768 ou 1366 pixels sem possuir cada dispositivo. Ela também relata seu próprio tamanho de tela e janela, que equipes de suporte frequentemente solicitam.
Os números são pixels CSS, as unidades que um layout de página da web usa, não os pixels físicos de uma tela. Um celular com uma tela muito nítida ainda relata um viewport de cerca de 360 a 430 pixels CSS de largura, que é o que seu design deve se encaixar. A tabela lista tamanhos típicos para classes de dispositivos populares. Dispositivos reais diferem, e barras de ferramentas do navegador ocupam alguma altura, então trate os tamanhos como um guia próximo em vez de uma medição exata.
Muitos sites proíbem serem mostrados dentro de outra página, para proteger visitantes de truques de clique. Quando um site envia essa instrução, esta ferramenta detecta, não mostra visualização e avisa, em vez de mostrar uma caixa em branco. Seu próprio site pode ser enquadrado se não enviar X-Frame-Options ou uma regra frame-ancestors. Uma visualização enquadrada também não executa media queries no próprio dispositivo, então confirme layouts importantes em um celular real antes de lançar.
Perguntas frequentes
Por que a visualização diz que a página não pode ser enquadrada?
Muitos sites, incluindo bancos, redes sociais e grandes lojas, enviam um cabeçalho que proíbe mostrar a página dentro de outra página, como proteção contra sequestro de cliques. O navegador mostraria uma caixa em branco, então a ferramenta avisa você. Teste esses sites nas ferramentas de desenvolvedor do seu navegador no modo de dispositivo.
Qual é a diferença entre tamanho de tela e tamanho de viewport?
O tamanho da tela é a exibição completa do seu dispositivo. O viewport é a parte da janela do navegador que mostra a página da web, que é menor por causa das barras de ferramentas e barras de rolagem. Os layouts reagem ao viewport, então esse é o número que importa para design responsivo.
Os tamanhos de dispositivos são exatos?
São tamanhos típicos de pixels CSS para classes de dispositivos comuns. Celulares e tablets variam por modelo e software, e barras do navegador mudam a altura. São precisos o suficiente para detectar problemas de layout, mas sempre teste páginas importantes em um dispositivo real antes do lançamento.
Isso testa meu site em um celular real?
Não. Ele estreita o frame para uma largura de celular, então a página aplica suas regras de layout móvel, mas ainda funciona no seu navegador atual. Comportamento de toque, fontes, barras do navegador e desempenho podem diferir em um celular real. Use como uma verificação rápida inicial, não como o teste final.
O endereço que insiro é armazenado?
Não. Nosso servidor solicita a página uma vez para ler seus cabeçalhos de enquadramento e depois esquece. A visualização em si carrega diretamente do site para seu navegador. Não salvamos o endereço, o conteúdo da página ou seu tamanho de tela.