Qual é a melhor maneira de testar uma página da Web em resolução mais alta que as resoluções da tela atual?

10

Estou criando um site responsivo em que preciso testar a renderização em css, html e javascript da minha página na resolução de 2400px enquanto a minha tela tem apenas 1900px.

windows display resolution website metal gear solid
fonte
possível duplicata de Como você pode tirar uma captura de tela de uma página da web inteira?
precisa saber é o seguinte
Você percebe que pode redimensionar as janelas do navegador além da resolução da tela na maioria dos sistemas? Basta movê-los até a metade da tela e redimensionar a borda que está agora no meio da tela. É inútil para uso real, mas será suficiente para testes. Esta captura de tela da janela completa foi tirada no OS X com resolução de tela de 1680x150.
Daniel Beck
@DanielBeck - estranho eu estou tentando mesmo no meu Chomre (Windows), mas não se estende além da minha tela atual
Metal Gear Solid
É realmente um problema com o seu sistema operacional tentando enganar você então . Poderia reproduzir com o Safari no Windows 7.
Daniel Beck
Minas é o Windows 7 também
Metal Gear Solid

Respostas:

3

No navegador Chrome:

  1. Pressione F12. Isso abrirá o DevTools.

  2. Clique no ícone de configurações no canto inferior direito. Isso abrirá as configurações do DevTools.

  3. Vá para Substituições no menu esquerdo.

  4. Marque Ativar e Métricas do dispositivo.

  5. Digite a resolução da tela

Eu sempre uso, é realmente conveniente.

Arman Bimatov
fonte
2

Se você pressionar Ctrl+ Shift+ Mnas versões recentes do Firefox, entrará no Responsive Design View , que pode redimensionar a janela de exibição do navegador para ser maior que o tamanho real da tela. Você também pode capturar imagens e simular eventos de toque a partir do FF 26 em diante.

Captura de tela do RDV
Clique para ampliar

Você pode achar mais fácil redimensionar depois de diminuir a janela - você pode arrastar os dimensionadores ainda mais de uma vez. Ou simplesmente insira uma predefinição personalizada na lista suspensa.

Prumo
fonte
Existe uma API para esta opção? Para habilitá-lo via código js injetado no site ou de dentro de um addon?
21714 Kamal Reddy
@KamalReddy Eu não acho que você seria capaz de fazê-lo no contexto de conteúdo (site), mas deve ser possível no contexto do Chrome (complemento). Bem, no futuro de qualquer maneira. Talvez você possa simular o Ctrl + Shift + M?
22414 Bob
1

Você pode experimentar este site, que permite testar sua página da web com qualquer resolução de tela, escolher entre uma resolução predefinida ou inserir sua resolução personalizada. espero que você ache essas linhas úteis.

Kamalam
fonte
Sendo bloqueado pelo nosso servidor proxy. Isso é um ponteiro para outro site ou essa página PHP é a página real da ferramenta?
Canadian Luke
a página PHP que eu adicionei aqui é a página real da ferramenta
kamalam
0

Essa pergunta provavelmente é mais adequada para os webmasters, mas vou dar uma facada nela e sugerir ViewLikeUs que

permite verificar a aparência do seu site nos formatos de resolução mais populares.

CharlieRB
fonte
1
tem apenas 1920 max
metal gear solid
0

Adicione uma resolução de tela personalizada no painel de controle da sua placa de vídeo.

GENiEBEN
fonte
3
Resoluções maiores que as suportadas pela tela? Você poderia fornecer mais detalhes sobre como configurar isso e como ele é?
Daniel Beck
@DanielBeck Este link do tutorial do YouTube é para cartões da nVidia. Bastante semelhante para ATI / AMD.
GENiEBEN 12/12
2
@ElGenieben Esse vídeo avisa explicitamente às 0:39 que você pode danificar sua tela definindo uma resolução muito alta.
Nicole Hamilton
0

Você pode experimentar o complemento para o Chrome: testador de resolução que suporta resoluções personalizadas :)

Skuli Axelson
fonte
0

Basta alterar o zoom no seu navegador, quando você diminuir o zoom, essencialmente o tamanho da sua janela está relatando uma largura cada vez maior ao seu aplicativo.

exemplo jsfiddle aqui , basta clicar no botão, ver a largura que está relatando, diminuir o zoom um pouco e clicar no mesmo botão - ele informará um tamanho maior.

Doobeh
fonte
0

Experimente as configurações de resolução personalizadas no emulador de dispositivo no Google Chrome. Dá a você mais controle do que usar a funcionalidade de zoom do navegador.

Ative o emulador de dispositivo e marque a opção 'zoom to fit'.

Insira manualmente resoluções com largura de até 9999 pixels (ou arraste as bordas da tela emulada. A resolução emulada será redimensionada para caber na sua própria janela de exibição.

Você pode manter a altura da resolução baixa, na verdade, pois poderá rolar para baixo de qualquer maneira. Dessa forma, você também pode manter o inspetor aberto. Um ótimo fluxo de trabalho para desenvolvimento web!

bramchi
fonte