Resolução do celular: dpi, pixels, e mais!

Em Dúvidas de aparelhos e apps por André M. Coelho

Existem muitos tipos de dispositivos, como um laptop, tablet, celular etc. e cada um desses tipos de dispositivos vêm com tamanhos de tela diferentes e diferentes resoluções de tela. Para um usuário final, essas são algumas coisas simples.

Por exemplo, se eles querem uma tela maior, eles optarão por um laptop de 15 polegadas em vez de um laptop de 13 polegadas. Além disso, se quiserem uma tela mais nítida, eles optarão por uma tela de 2160p em vez de uma tela de 1080p ou uma tela de 458 PPI/DPI em vez de uma tela de 326 PPI/DPI.

No entanto, você verá que a tela de um telefone celular com largura de 1080 pixels exige que você o considere mais como uma tela com largura de 360 pixels. Mas se você deseja que uma imagem pareça nítida nesses 360 pixels, precisará usar uma imagem com largura de 1080 pixels.

O que é resolução de tela do celular?

Resolução da tela é o número de pixels que uma tela pode exibir. Isso é medido multiplicando o número de pixels horizontais com o número de pixels verticais presentes em uma tela. Por exemplo, uma tela de FHD possui 1920 pixels em sua largura e 1080 pixels em sua altura. Portanto, a resolução da tela de uma tela FHD é 1920p x 1080p = 2.073.600 pixels.

Quando as empresas comercializam seus dispositivos, afirmam a resolução da tela de seus dispositivos. Resolução de tela mais alta significa uma tela mais nítida ou mais clara para o mesmo tamanho de tela. Por exemplo, se um laptop for de 15 polegadas, sua tela ficará mais nítida com uma tela de 1440p em comparação com uma tela de 1080p.

Dispositivos com tamanhos de tela menores podem ter resolução igual ou mais de tela do que os dispositivos com tamanhos de tela maiores. Por exemplo, um laptop Dell XPS 13 tem um tamanho de tela de 13 polegadas com uma resolução de tela de 1920p x 1080p, onde o iPhone 11 Pro tem um tamanho de tela de 5,8 polegadas, mas com uma resolução de tela de 1125p x 2436p. Portanto, a resolução da tela do iPhone 11 Pro é realmente maior que a do laptop Dell XPS 13.

A resolução da tela também é comumente referida como resolução nativa, resolução de exibição e resolução física. Onde os pixels em uma resolução de tela são comumente referidos como pixels de hardware, pixels de dispositivos e pixels físicos. Aqui, um pixel físico é a menor luz individual em uma tela capaz de exibir uma cor inteira.

Tanto a densidade de pixels quanto a resolução influenciam na nitidez e qualidade da imagem da tela de um smartphone. (Imagem: Pinterest)

O que é Viewport?

O Viewport é a área total em um navegador da Web onde as páginas da Web podem ser exibidas. Portanto, a parte de uma página da Web que você vê em uma tela é na verdade a parte que está dentro da viewport do navegador da web. Portanto, quando você deseja ver diferentes partes de uma página da Web no seu Chrome, Safari ou qualquer outro navegador da Web, você precisa trazer essas peças na viewport do navegador da Web rolando a página da Web.

O tamanho do viewport é composto de pixels CSS, portanto, pode ou não ser igual ao número de pixels físicos em um dispositivo. Por exemplo, o tamanho da viewport do laptop MacBook Pro de 16 polegadas é de 1536p x 960p, embora sua resolução de tela seja 3072p x 1920p. Além disso, o tamanho da viewport do iPhone 11 Pro é 375p x 812p, embora sua resolução de tela seja 1125p x 2436p.

No CSS, a unidade PX é usada para significar pixel CSS. Portanto, se você definir uma largura de imagem como 300px, esses 300 pixels representarão os pixels CSS e cobrirão 300 pixels de largura na viewport e não na resolução da tela.

Embora os dispositivos com tamanhos de tela menores possam ter resolução igual ou mais de tela do que os dispositivos com tamanhos de tela maiores, o tamanho da viewport de dispositivos com tamanhos de tela menor geralmente é menor que o dos dispositivos com tamanhos de tela maiores de um tipo diferente. Portanto, a resolução da tela de um celular pode ser igual ou mais que um laptop, mas o tamanho da viewport de um celular geralmente será menor que o de um laptop.

Essa diferença no tamanho da viewport e na resolução da tela é necessária para compensar as diferenças entre o número de pixels físicos e tamanhos de tela para vários dispositivos. Por exemplo, uma tela de laptop pode ter 12 polegadas de largura, composta por 1200 pixels. Ao mesmo tempo, uma tela móvel pode ter 3 polegadas de largura, composta pelos mesmos 1200 pixels. Portanto, ambos os dispositivos têm tamanhos de tela diferentes, mas o mesmo número de pixels físicos.

Agora, quando você navega em uma página da web no seu laptop, pode ver que o tamanho do texto nessa página é grande o suficiente para você ler confortavelmente. Mas, quando você navega na mesma página do seu celular, pode ver que os textos parecem tão pequenos que não podem ser lidos. Isso pode acontecer porque sua tela móvel tem apenas 3 polegadas de largura, mas está tentando mostrar a mesma quantidade de texto em uma linha que está sendo mostrada na tela de laptop de 13 polegadas de 13 polegadas por causa de ambas com a mesma resolução de tela.

É aí que um tamanho diferente de viewport da resolução da tela entra em resgate. O tamanho da viewport permitirá que a largura da tela do laptop seja tratada como 1200 pixels, mas a largura da tela móvel é tratada como apenas cerca de 300 pixels. Dessa forma, você poderá ver textos confortavelmente legíveis no seu laptop e no seu dispositivo móvel.

Aqui está uma boa explicação da resolução lógica.

O viewport também é comumente referida como resolução lógica e resolução CSS. E os pixels em uma viewport são comumente referidos como pixels lógicos, pixels de software, pixels independentes de dispositivos e pixels CSS. Aqui, 1 pixel CSS é igual a 1/96 de polegada.

O que é DPR no celular?

A proporção de pixels de DPR ou dispositivo, também conhecida como razão pixel CSS, é o número de pixels físicos que compõem um pixel CSS em uma direção de uma tela como na direção da largura ou na direção da altura. Em outras palavras, é a proporção entre os pixels físicos e os pixels CSS. Também se pode dizer que o DPR é a proporção entre a resolução da tela e o tamanho da viewport.

Por exemplo, a resolução da tela de um iPhone 11 Pro é 1125p x 2436p e o tamanho da viewport é de 375p x 812p. Portanto, todo pixel CSS está ocupando 3 pixels físicos em cada direção (largura: 375p x 3 = 1125p; altura: 812p x 3 = 2436p). Portanto, o DPR do iPhone 11 Pro é 3.

No entanto, um valor de DPR de 2 não significa que 1 pixel CSS é igual a 2 pixels físicos. Em vez disso, significa que 1 pixel CSS é igual a 2 pixels físicos em ambas as direções de largura e altura. E como os pixels em uma tela são quadrados, 2 pixels físicos em ambas as direções resultarão em 2 x 2 = 4 pixels.

Portanto, para um valor de DPR ou 2, 1 pixel CSS será igual a 2 x 2 = 4 pixels físicos. Da mesma forma, para um valor de DPR de 3, 1 pixel CSS será igual 3 x 3 = 9 pixels físicos.

Dispositivos com maior resolução de tela para o mesmo tamanho de tela têm maior valor de DPR.

Todas as telas têm um DPR que pode ser inteiro ou decimal. Quando um pixel físico é igual a um pixel CSS em uma tela, a tela terá um valor de DPR de 1. Por exemplo, se um laptop for 1920p x 1080p e sua viewport também é de 1920p x 1080p, então esse laptop tem um DPR de 1 . Mas se esse laptop tiver um tamanho de viewport de 1280p x 720p, o laptop terá um valor DPR de 1,5 (largura: 1280p x 1,5 = 1920p; altura: 720p x 1,5 = 1080p).

O valor do DPR também pode ser menor que 1, embora não seja muito comum. Mas você pode conseguir isso ampliando o seu navegador da web. O zoom ou ampliar o zoom em um navegador da Web resultará em uma alteração no valor do DPR, bem como no tamanho da viewport.

Quando o tamanho da viewport é menor que a resolução da tela, o que significa um valor DPR de mais de 1, as imagens entregues com base no tamanho da viewport não parecerão tão nítidas quanto poderiam parecer. Por exemplo, se uma tela móvel tiver um valor DPR de 2, um contêiner de imagem de largura de 300px cobrirá a largura de 300px na viewport. No entanto, devido ao valor do DPR, a resolução da tela que a imagem terá será de 300p x 2 = 600p.

Portanto, fornecer uma imagem de 300p de largura na resolução da tela de 600p ficará embaçada. O tamanho da imagem deve ter uma largura de 600p para parecer clara nesse contêiner de imagem de 300p no celular. É por isso que as imagens devem ser ajustadas ao valor do DPR ao entregar em qualquer tela. Você pode vincular várias versões da mesma imagem em sua página da web, definindo qual imagem deve ser servida para qual valor DPR.

Você não precisa fazer nada extra para servir fontes ou quaisquer arquivos vetoriais, como imagens SVG, para que elas pareçam nítidas nas telas com altos valores de DPR. Isso ocorre porque eles podem ser dimensionados para ajustar todos os tamanhos de tela sem perder a qualidade, e são ajustados automaticamente pelos navegadores da Web de acordo com os valores do DPR. Mas isso não é possível para arquivos de imagem como JPG, PNG, GIF e assim por diante, porque eles não podem ser escalados para qualquer tamanho sem perder qualidade ou nitidez.

Portanto, entregar imagens de alta resolução aos monitores Retina realmente significa fornecer imagens com base nos valores do DPR, porque os displays Retina do dispositivo Apple têm um valor DPR de mais de 1.

O que é PPI ou DPI na tela do celular?

PPI ou pixels por polegada ou DPI pontos por polegada é o número de pixels físicos que compõem uma polegada em uma direção de uma tela, como na direção da largura ou na direção da altura. Não é o mesmo que a resolução da tela. Isso ocorre porque, em caso de resolução da tela, o número de pixels físicos presentes em qualquer direção de uma tela não se limita a nenhum comprimento específico como uma polegada.

Como a resolução da tela e o PPI estão relacionados aos pixels físicos de uma tela, você pode calcular o PPI de uma tela pela resolução da tela e pelo tamanho da tela e vice -versa. Por exemplo, um laptop com tela diagonal de 13 polegadas e uma proporção de 16: 9, a largura e a altura do dispositivo serão de cerca de 11,3 polegadas e 6,4 polegadas, respectivamente. Portanto, se a resolução da tela do laptop for 1920p x 1080p, o PPI da tela será de 170 (11. 3 x 170 ≈ 1920; 6,4 x 170 ≈ 1080).

Ficou alguma dúvida sobre a resolução do celular? Deixem nos comentários e iremos te ajudar!

Sobre o autor

Quando André entrou na faculdade em 2004, notebooks eram ainda muito caros. Para anotar as informações, buscou opções, encontrando no Palm Zire 72 um aparelho para ajudá-lo a registrar informações das aulas. Depois, trocou por um modelo de celular com teclado, Qtek quando o 2G e o 3G ainda engatinhavam no Brasil. Usou o conhecimento adquirido na pesquisa de diferentes modelos para prestar consultoria em tecnologia a diversas empresas que se adaptavam para o mundo digital. André passou ainda por um Samsung Omnia, um Galaxy Note II, e hoje continua um entusiasta de smartphones, compartilhando neste site tudo que aprendeu.

Veja também