Resolução de tela comum?

Isso realmente depende de onde você está no mundo. Mundialmente, 1366×768 ainda é o mais comum, entretanto 1920×1080 é a única resolução que está realmente aumentando em absorção (presumivelmente porque esta parece ser a tela widescreen padrão para laptops modernos).

O site StatCounter.com deve ajudá-lo a obter mais informações sobre isso.

NO ENTANTO , tenha em mente que só porque certas resoluções são mais comuns do que outras, isso não leva em conta a largura do navegador do usuário janela. Infelizmente, existem poucas medições conhecidas para esta estatística (o Google Analytics costumava fornecer isso, mas parou de suportá-lo).

Comentários

• Além disso, as médias mundiais para este tipo de dados podem (serão) não as mesmas da sua base de usuários. Até que você teste seus usuários REAIS, você não ‘ não sei o que eles ‘ estão usando. Portanto, sua melhor aposta é projetar seu layout para funcionar em resoluções múltiplas (e variáveis).
• Para dados sobre a distribuição da resolução da tela entre smartphones e tablets Android e iOS, consulte Resolução ‘ seção no final de opensignalmaps.com/reports/fragmentation.php . Convenientemente aqui, é mais provável que a resolução da tela se aproxime das dimensões da janela de visualização / janela do navegador em smartphones e tablets do que em laptops e desktops. Inconvenientemente para o Android, a fragmentação da plataforma ‘ se reflete de forma bastante nítida na ampla distribuição de resoluções de tela. Isso provavelmente tornaria o layout fluido para dispositivos móveis uma boa ideia.
• Apenas como uma atualização, 1366×768 ultrapassou 1024×768 bastante desde que esta resposta foi postada.
• @DangerZone Bom ponto . Infelizmente, o StatCounter não ‘ oferece links para ‘ atual ‘, pois eles sempre exigem o sufixo de um intervalo de datas (daí várias edições nesta resposta ao longo dos anos!). Eu alterei a resposta com estatísticas atualizadas. Acho que ‘ terei que fazer o mesmo em mais ou menos um ano também!

Lembre-se de que laptops e desktops não são mais os únicos aparelhos habilitados para a web. O iPad tem uma resolução de 1024×768, o iPhone 4 tem uma resolução de 960×640, supondo que você os use no modo paisagem.

Comentários

• Afaik the O iPhone 4 renderiza as páginas como se tivesse a antiga resolução 480 * 320. As páginas em meus 4 não têm ‘ a metade do tamanho de um 3GS. A resolução extra é usada apenas para renderização de fonte / imagem é o que eu ‘ estou chegando.
• Ponto absolutamente válido. A largura da tela de 960 pixels permanece relevante mesmo com o aumento do tamanho da tela do desktop, porque muitos dispositivos portáteis também podem mostrar esse tamanho.Sem falar do fato de que os sites são ilegíveis quando são muito largos (mais de 1600).

A escolha da resolução de tela mínima se resume a quantos usuários você deseja excluir.

Se você não tem um histórico de dados de resolução para seus usuários específicos, uma opção é usar estatísticas públicas e globais de uso como uma diretriz. Usando uma fonte de dados globais, criei o seguinte gráfico para ajudar a transmitir o estado da largura da tela da área de trabalho em um relance.

“mas hoje em dia deve ser algo muito maior”

Cada resposta aqui parece ignorar todo o mundo móvel.

Claro, as telas dos desktops estão ficando maiores. Mas todo mundo também está usando dispositivos móveis. Grande parte da web agora está sendo acessada em telefones e tablets.

O design adaptável é realmente o caminho a seguir.

Comentários

• SIM. Este é o ponto chave. O design fluido da web é vital porque muitas pessoas estão acessando sites de telefones e tablets atualmente. A tendência da resolução é a fragmentação, não a expansão.

Por que você não projeta de forma adaptativa para “qualquer coisa você tem disponível “?

Com javascript, você pode descobrir o tamanho da janela do navegador e fazer algumas alterações na folha de estilo. por exemplo, se você tiver uma imagem de fundo grande e graficamente rica com uma coluna de 960 px, a imagem de fundo não é necessário para aqueles que executam 1024-768, então você não precisa carregá-lo. Você também pode modificar o tamanho da fonte para fazer o melhor uso do espaço disponível na tela.

Resolução mais popular em 2011 é 1280×800. 18,09% dos usuários da Internet usam.

Aqui estão as 10 principais resoluções para 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/

Comentários

• +1 para a referência, mas com 1024×768 logo atrás e sendo a mais baixa das duas resoluções principais, isso talvez devesse ter consideração mais elevada, apesar da porcentagem ligeiramente inferior.
• 1024 estará disponível por um tempo + novos dispositivos móveis. Portanto, eu recomendaria criar sites para esta resolução, se você não está planejando fazer um design extensível.

Concordo com Jon que deve-se ter o cuidado de usar a resolução de tela inteira como base ao projetar aplicativos da web. Ele também está certo quando afirma que a variante de tela larga do 768 é muito comum nos dias de hoje.

Recentemente, tive alguns bons motivos para diminuir minha política de resolução de tela. TVs e laptops multimídia agora usam o padrão HD como sua resolução. Isso significa que é uma boa chance de vários usuários terem 1280 × 720 como sua resolução. Segmentar 768 como altura pode ser um pouco demais para muitos usuários.

Veja também: http://en.wikipedia.org/wiki/Screen_resolution

Se você deseja estar seguro com telas de mesa / laptop usando um layout estático, continue usando o mínimo de 1024×768. Mas a melhor opção é projetar um layout fluido (flexível).

A Microsoft postou recentemente seus dados de telemetria nesta área para usuários do Windows 7 :

Você pode ver que (pelo menos para usuários que ainda estão no ciclo de atualização), há uma grande quantidade de usuários executando telas 16: 9 e 16:10 em vez de 4: 3 (e a pluralidade delas executa em 1366 × 768).

Comentários

• Parece que mesmo internamente a Microsoft está ignorando o cenário móvel.;)

Sim, tente considerar um Layout Flexível. Se você planeja usar todos os pixels disponíveis, cobrir a tela inteira é a melhor solução, com o precisa usar javascript. Você deve acessar o Web design responsivo do ALA e dar uma olhada no exemplo . Quando visualizando este exemplo, tente redimensionar seu navegador e ver como o conteúdo reage. Dessa forma, seu site pode ficar ótimo em qualquer tela, seja desktop, laptop, tablet ou telefone.

Comentários

• observe se você for no caminho de usar cada pixel disponível, pode tornar o texto mais difícil de ler pelos leitores.

Minha meta é de 1280 X 1024, com um layout que será adaptável se as restrições de dispositivos móveis forem um fator.

Caso contrário, geralmente adiro a análise e tento estar atento às principais resoluções para o determinado site.

Algumas coisas a se considerar:

1. Para quem é este aplicativo? Se for interno (ou seja, ambiente corporativo), converse com a TI e veja a resolução das telas dos funcionários. Observe especialmente os funcionários que mais trabalhariam no aplicativo.
2. Se sim ” Se for um aplicativo voltado ao público, pense nos dados que você tem sobre as “resoluções dos usuários”. Se você “estiver redesenhando, verifique as análises no site atual e tenha uma ideia das resoluções que seus usuários estão executando. Você pode notar um padrão aqui (ou seja, as pessoas tendem a ter resoluções muito altas, pois são usuários avançados, etc.), mas é provável que esteja em todo lugar.
3. Pense nos dados que você representa apresentando. Se houver muitas grades, talvez um layout fluido seja melhor. Então o usuário pode esticar sua tela para mostrar mais dos dados de que precisa.

Projetar para 1024 é um caminho seguro para na web, mas é preguiçoso se você não está tentando aprender mais sobre seus usuários antes de tomar uma decisão.

O 1024 * 768 ainda deve permanecer como um senso comum. Caso contrário, realmente depende do seu público. Se você fizer um site ou aplicativo para designers, por exemplo, você deve otimizar para uma resolução muito maior, como 1680 * 1050.

Você deve testá-lo ou perguntar ao público desejado, mas 1024 * 768 ainda é obrigatório!

Em um mundo ideal, haveria estilos (CSS) diferentes para resoluções e dispositivos diferentes. 🙂

Comentários

• ” Se você faz um site ou aplicativo para designers, por exemplo, você deve op otimizar para uma resolução muito maior, como 1680 * 1050. ” A maioria dos ‘ designers ‘ tem iPhones .
• @ DA01 – Assim, o CSS diferente para dispositivos diferentes.
• Isso ajuda, mas eu estava abordando principalmente o ‘ otimizado para ‘. O ideal é que você ‘ otimize para ‘ todos os dispositivos.

Resoluções comuns do projetor:

• XGA = 1024 x 768 pixels
• WXGA = 1280 x 800 pixels
• HD = 1920 x 1080 pixels
• 4K = resolução de 4096 x 2160

Comentários

• Você poderia expandir isso? E o que você quer dizer com resoluções do projetor?
• exemplo: se você tem um projetor PT-EX600U LCD, quando você o conecta ao seu computador, a resolução da tela muda para: 1028 x 768 pixels.