Tamanhos de Tela e Resoluções de Dispositivos

Resolução lógica vs. física e o DPR

Toda tela moderna tem duas resoluções. A resolução física é a quantidade real de pixels embutidos no painel — por exemplo, 1179 × 2556 em um iPhone 15. A resolução lógica (CSS) é o espaço de coordenadas menor no qual uma página web é organizada, como 393 × 852. O device pixel ratio (DPR) é a ponte entre as duas: é a resolução física dividida pela lógica, então um DPR de 3 significa que o celular desenha um bloco de 3 × 3 pixels reais para cada pixel CSS. Celulares e notebooks de alta densidade, do tipo “Retina”, usam um DPR de 2 ou 3 para renderizar textos e imagens nítidos, enquanto um monitor de desktop comum tem DPR de 1, no qual um pixel CSS equivale a um pixel físico.

Por que designers trabalham com tamanhos de viewport

Ao criar um layout responsivo, suas media queries e breakpoints CSS são medidos em pixels CSS — o viewport lógico — e não nos pixels físicos do painel. Um celular que fisicamente tem 1080 pixels de largura ainda reporta um viewport de apenas 360–414 pixels CSS, e é por isso que um breakpoint mobile de 360px cobre a maioria dos celulares Android. Projetar com base no viewport, em vez da resolução bruta, mantém textos e áreas de toque em um tamanho físico consistente em dispositivos com densidades de pixel muito diferentes, de modo que o mesmo layout funcione bem tanto em um notebook de baixa densidade quanto em um celular topo de linha de alta densidade.

Como ler esta tabela

• Viewport (px CSS) é o tamanho lógico que uma página web enxerga, listado na orientação natural do dispositivo — retrato para celulares e tablets, paisagem para notebooks e monitores.
• Resolução física é a contagem real de pixels do painel, o número anunciado em uma ficha técnica.
• DPR (device pixel ratio) multiplica o viewport até chegar à resolução física; qualquer valor acima de 1 indica uma tela de alta densidade.
• Proporção da tela é o formato da tela, do 19,5:9 mais alongado dos celulares modernos ao 16:9 da maioria dos monitores e ao 21:9 e 32:9 dos ultrawides.
• As linhas de notebooks e 4K refletem o nível de escala de tela padrão mais comum, então o viewport pode ser menor que a resolução nativa do painel.

Os tamanhos mudam a cada modelo

Trate estes números como uma referência prática, não uma garantia. Os fabricantes revisam as dimensões de tela quase a cada geração — só o iPhone já lançou viewports de 375, 390, 393, 402, 414, 430 e 440 pixels CSS de largura em modelos recentes — e os dispositivos Android variam ainda mais. O escalonamento de tela do sistema operacional também altera o viewport reportado: um notebook Windows com painel 1080p em escala de 150% se comporta como uma tela de 1280 × 720 com DPR de 1,5. O número mais confiável é sempre aquele que o seu próprio navegador reporta, e é por isso que o dispositivo correspondente acima é detectado ao vivo a partir da sua tela.