22

Existe alguma forma de simular uma tela com maior resolução para verificar como um site se comporta? Atualmente utilizo 1440x900 e preciso testar a interface em resoluções maiores.

6 Respostas 6

20

Nos browser Chrome e Firefox existem opções nas ferramentas de desenvolvimento que já vem nativas com os browsers para trabalhar com resoluções especificas. Abaixo os tutoriais de como ativar tais ferramentas.


Chrome

No Google Chrome existe no DevTools dele uma opção de Emulador, onde você pode simular diversas características no seu browser.

Para ativar, abra seu DevTools, (pressione F12, ou clique com botão direito e em inspecionar elemento).

No canto direito superior, tem um simbolo de engrenagem inserir a descrição da imagem aqui, clique nela e no menu General, tópico Appearance ative a primeira opção "Show 'Emulation' view in console". inserir a descrição da imagem aqui

Feche as opções, em cima no botão a esquerda da engrenagem, que parece com uma lista, clique nele. inserir a descrição da imagem aqui

No menu inferior que apareceu selecione "Emulation" inserir a descrição da imagem aqui no tópico "Screen" você poderá configurar os dados da sua resolução desejada e o pixel ratio para que caso sua resolução seja menor fique confortável a visualização mesmo tendo mais pixels que seu monitor.

inserir a descrição da imagem aqui

Demonstração da resolução desejada em um browser rodando em resolução nativa Full HD, porém emulando 1440x900, porém mudando a densidade de pixels você consegue emular resoluções maiores do que a que está usando: Demonstração da emulação de resolução do Chrome

Este recurso foi criado para trabalhar com dispositivos móveis, na página oficial você poderá obter mais detalhes.


Firefox

Também é possível emular no firefox, abra o inspetor de código e ative o icone de "Design Responsivo" Icone Design Responsivo no lado superior direito.

Ou através da sequência de teclas Ctrl+Shift+M (Windows)

Adicione a resolução desejada no menu superior esquerdo que vai aparecer. O resultado pode ser visto na imagem abaixo:

Firefox responsive resolution

3

Isto tem algumas soluções dependendo da maquina que você está utilizando.

  • Por exemplo, drivers de vídeo da nVídia permitem que você adicione resoluções personalizadas maiores do que a do seu monitor, gerando um scroll horizontal e vertical em todo o desktop.

  • Outra possibilidade é conectar um monitor adicional na placa de vídeo (isso funciona para vários tipos de placa e fabricante) e estender a área de trabalho nos dois, na horizontal, ampliando a tela do browser.

A vantagem de usar estes dois primeiros recursos é que simular somente dentro do browser às vezes não corresponde à realidade de uma área de trabalho realmente grande.

  • Uma outra possibilidade é usar o zoom dos browsers. Por exemplo, a tecla - no Opera, ou ctrl - no Chrome, Iron e similares diminuem o zoom da tela, servindo para alguns tipos de avaliação também.

  • Fora isso há sites como o View Like Us, que permitem uma simulação de resoluções diferentes da sua.

Provavelmente uma boa avaliação pode misturar mais de uma destas técnicas.

1

Você pode usar o recurso Modo de design adaptável (Ctrl + shift + M) do Firefox no menu Desenvolvedor web, depois é só ir configurando as dimensões de cada elemento usando media queries no CSS.

1

Experimente utilizar o Screen Fly, este site permite que você teste um site hospedado em diversas resoluções, o bacana é que ele tem as resoluções dos aparelhos. Isso acaba facilitando, assim você sabe em quais aparelhos o seu site está rodando perfeito.

1

Como algumas respostas estão meio datadas, pois os browser são atualizados com frequência, vou contribuir com uma resposta atualizada sobre as versões mais recentes do Chrome. É possível simular resoluções superiores a 4K com facilidade

Primeiro acesse as ferramentes do desenvolvedor do Chrome, apertando F12 ou Ctrl+Shift+i. Depois disso localize o botão conforme abaixo, ou aperte Ctrl+Shift+m

inserir a descrição da imagem aqui

Feito isso na parte superior, basta observar os quadrados vermelhos, vc pode colocar a resolução que quiser, tanto simulando telas menores, quanto maiores.

Aqui está um teste no site da globo com a resolução 50% maior que a minha tela.

(vc pode ir clicando nas barras AZUL, VERDE ou LARANJA, para ir simulando os breakpoints em min-width e max-width)

inserir a descrição da imagem aqui

Agora a visualização em 4K

inserir a descrição da imagem aqui

OBS1: Nessa mesma barra onde vc escolhe a resuloção vc também pode testar a tela com valores diferentes de Pixel Density (DPR: 1x, 2x e 3x). Além de poder "girar" a tela entre portrait e landscape no último botão da barra.

OBS2: Quando vc aumenta o zoom, vc está na verdade diminuindo a tela e a largura da tela, então se sua tela tem 1000px de largura e vc aumenta o zoom para 150% na verdade sua tela vai estar em 500px de largura.

0

Você pode criar uma página com um iframe chamando a página que deseja testar.

Coloque nesse iframe a width e height que você precisa.

Talvez tenha maneiras melhores, mas assim você consegue testar. Talvez trabalhando no zoom do browser você consiga um bom teste utilizado o iframe.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .