Como simular uma tela de resolução mais alta? [fechadas]

93

Existe alguma maneira de o navegador testar meus sites em resoluções superiores às minhas telas?

Ex: tenho uma tela de 1440 x 900 e desejo testar o site em 1920 x 1200, 1920 x 1080 etc.

html css resolution HappyDeveloper
fonte
@deceze na verdade é uma sugestão muito boa. O ponto principal de coisas como o surgimento de 960.gs é porque se você trabalha com tamanhos de pixel, seu design parece o mesmo em todos os lugares, apenas ocupa diferentes quantidades de espaço na tela com base na resolução da tela. Não há necessidade de testar gráficos de repetição horizontal em alta resolução, desde que você possa ver 2 repetições completas e um pouco para garantir que as costuras estejam alinhadas. Ou você pode simplesmente usar o princípio da cigarra para produzir algo mais interessante.
Endophage
1
@Endophage: Eu discordo. A construção de layouts fluidos de maneira adequada geralmente oferece melhores resultados em relação às preferências de tamanho de fonte do usuário, por exemplo. Ter a mesma aparência em todos os lugares não é essencial, é apenas espiar os pixels.
Você
@Você Ainda não vi um layout fluido que mude o tamanho da fonte. Observe que a razão pela qual larguras de pixel fixas são boas é porque o olho humano se esforça para escanear linhas em um determinado comprimento (acredito que tenham cerca de 20 palavras com tamanho de fonte em torno de 12 px, você mesmo pode pesquisar). Se você está falando sobre diminuir as resoluções do telefone, é uma história diferente, mas se você está falando sobre resoluções de desktop / laptop, se eu apenas tiver uma tela grande com alta resolução e redimensionar a janela, estou efetivamente testando resoluções diferentes.
Endophage
1
@Endophage: Daí a necessidade de usar 40em(ou uma medida semelhante), não 960px, como sua largura. Os pixels não aumentam quando eu decido que o tamanho da fonte 12px é muito pequeno para mim e pressiono Cmd- +. Além disso, a janela do meu navegador mal tem 960 pixels do jeito que está.
Você
@Você, na verdade, os pixels serão redimensionados quando você acertar Ctrl/Cmd +porque é uma função de zoom. Você pode tentar aqui mesmo no SO. A seção de conteúdo principal tem 960 pixels de largura. Usar algo como 40em não escalará com a resolução da tela. O uso de emtamanhos é relativo ao tamanho da fonte do elemento pai que é herdado até 1em / 16px no nível superior, a menos que seja substituído (e desculpas, deveria ter sido 12pt e não px no meu comentário anterior). Leia: kyleschaeffer.com/best-practices/…
Endophage

Respostas:

76

[Editar: verifique as devtools do seu navegador primeiro! Como @SkylarIttner aponta nos comentários, ferramentas para teste de design responsivo foram implementadas na maioria dos navegadores desde que a solução abaixo foi postada. Eles são provavelmente a melhor / mais fácil opção agora.]

Você poderia, me corrigir se eu estiver errado, simplesmente criar um iframe com style="desired width & height"e src="your/test.site"como filho único de <body>. Deve exibir o site como se a resolução fosse a largura / altura especificada e resultar em barras de rolagem para examiná-lo.

Não é tão cômodo quanto usar um terceiro, ter que configurar você mesmo, mas tem a vantagem de poder testar localmente sem conexão com a internet.

Cody Crumrine
fonte
5
Por que ... devo dizer, isso é genial. +1
Mafia
Claro! Obrigado! ^^
Oskar Duveborn
Eu não posso te agradecer o suficiente!
Rahman Sharif
1
Obrigado por todos os comentários positivos, pessoal. É bom saber quando as coisas são úteis.
Cody Crumrine
1
Na chance de ajudar alguém, Aqui está um exemplo de código para fazer o que @Cody Crumrine sugeriu e é Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>
Stuart
28

Esta solução é muito mais rápida do que as propostas acima:

http://www.infobyip.com/testwebsiteresolution.php

Não é tão versátil quanto o browsershots.org, mas é muito mais rápido (alguns segundos vs. uma fila de 45 minutos).

Kyle
fonte
Esta não é uma resposta ruim. No entanto, esse site não oferece absolutamente nada que você já não possa fazer simplesmente redimensionando a janela do navegador em qualquer computador desktop. IMHO, os links dessa página para tablets e telefones são totalmente inúteis ... porque em uma pequena tela do iPod, meu site de 1000 pixels é redimensionado automaticamente pelo Mobile Safari para exibir perfeitamente bem.
Sparky de
4
@ Sparky672, eu pessoalmente não consigo redimensionar meu navegador para ficar maior do que a resolução da tela. O OP estava pedindo para ver 1920 em um 1440. Talvez haja uma maneira, mas é tão fácil quanto a solução do infobyip? Peço desculpas se estou esquecendo algo óbvio (acho que posso estar).
Kyle
2
Obrigado @ Sparky672 e não há problema. Mas você não deveria deletar seu comentário "esse site não oferece absolutamente nada que você já não possa fazer por conta própria, simplesmente redimensionando a janela do navegador em qualquer computador desktop", uma vez que isso não é verdade?
Kyle
1
@ Sparky672, que tal vertical?
Kyle
1
Eu uso vertical para ver o que fica acima e abaixo da dobra. Eu o combino com StatsCounter e MouseFlow para ver qual porcentagem do público vê o quê. Eu te amo Sparky! Acho que você está lendo meu tom errado. E eu queria ser útil. Ninguém vai olhar para a solução que eu forneço com 0 votos e uma lista de comentários. Mas tudo bem ...
Kyle
9

Algumas ideias:

Use o zoom do navegador, zoom de 1024x768 50% = resolução simulada de 2048x1536, sei que o Chrome redimensiona imagens e coisas do gênero. As coisas ficam difíceis de ler, mas presumo que você esteja testando a colocação e tal.

Além disso, você pode usar alguns programas de captura de tela para fazer capturas de tela com resolução superior à normal (o fireshot no Firefox me permite fazer isso, mas teve problemas de memória com resoluções realmente altas e não é mais gratuito).

StrangeWill
fonte
6

Uma solução, talvez exagerada, seria usar o Xvfb : defina a resolução e a profundidade de cor desejadas, carregue sua página no (s) navegador (es) e faça capturas de tela.

Eugen Constantin Dinca
fonte
4

Experimente viewlike.us ou screen-resolution.com . Nem todas as resoluções possíveis, mas pelo menos as mais comuns.

Eu não experimentei, mas parece bastante simples.

Eddie Cheng
fonte
resolução de tela gera isto: "A resolução da tela é muito pequena O pop-up que você selecionou é muito grande para a resolução da tela que você usa. A resolução da tela é 1440 pixels por 900 pixels. A janela pop-up que você tentou abrir é 1920 pixels por 1200. "
HappyDeveloper de
view like us lança isto: "Proibido Você não tem permissão para acessar / neste servidor. Além disso, um erro 404 Not Found foi encontrado ao tentar usar um ErrorDocument para lidar com a solicitação. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server at viewlike.us Port 80 "
HappyDeveloper
2

Embora isso não diga a resolução exata do seu teste, você pode usar a zoomferramenta no Chrome ou FF para diminuir o zoom. Isso dará uma ideia bastante precisa da aparência do site em telas de alta resolução.

Jason Gennaro
fonte
2

Se você deseja apenas ver uma captura de tela estática do seu site, recomendo http://browsershots.org/

Eles oferecem a opção de ver capturas de tela de seu site em praticamente qualquer combinação de navegador / sistema operacional, incluindo a capacidade de especificar o tamanho da tela, além de um monte de outras opções.

Vale a pena marcar como favorito.

Spudley
fonte
1

Você pode tentar wkhtmltoimage , que pode fazer capturas de tela em resoluções arbitrárias.

Além disso, no KDE4 é possível aumentar uma janela além do tamanho da tela. Acho que já vi isso no Windows 7 também. Não tenho certeza sobre outros sistemas operacionais.

user123444555621
fonte
1

O IE9 permite redimensionar a janela do navegador para um tamanho arbitrário: Pressione F12 para ferramentas de desenvolvedor, vá para Ferramentas | Redimensione e escolha seu tamanho preferido. Em seguida, use alguma ferramenta que possa capturar janelas fora da tela se a janela for maior que sua tela. Este artigo parece indicar que o Snagit pode fazer isso. Então dê uma olhada na foto capturada.

Jaco Briers
fonte