Verificador de Resolução de Tela

Continuar na ferramenta

Mais páginas desta ferramenta

tela retina hidpi e dpr

Tela HiDPI, Retina e DPR

"Retina" é o nome de marketing que a Apple deu às telas HiDPI, aquelas em que o devicePixelRatio é 2 ou mais: nelas, cada pixel CSS do layout é desenhado usando uma grade de vários pixels físicos, ganhando nitidez sem que nada na página pareça menor. Esta página mostra a matemática por trás dessa grade em DPR 1, 2 e 3.

A grade de pixels físicos por trás do DPR

Numa tela HiDPI, o navegador não aumenta o tamanho visual dos elementos, ele aumenta a quantidade de pixels físicos usados para desenhar cada pixel CSS: com DPR 2, cada pixel CSS vira uma grade de 2 por 2, ou seja, 4 pixels físicos; com DPR 3, a grade fica em 3 por 3, ou 9 pixels físicos por pixel CSS. O resultado visual é bordas e texto mais suaves, porque o mesmo desenho tem mais amostras de cor para representar cada detalhe.
O termo Retina nasceu com o iPhone 4 em 2010 e a ideia de marketing por trás dele é que, à distância normal de uso, o olho humano não consegue mais distinguir pixels físicos individuais, então aumentar ainda mais a densidade deixaria de trazer ganho perceptível de nitidez. Tecnicamente, qualquer painel com DPR 2 ou mais se qualifica como HiDPI, seja ele vendido como Retina, 4K, QHD+ ou qualquer outro nome comercial.
Sem otimização, uma imagem raster pensada para DPR 1 fica borrada num painel HiDPI, porque o navegador precisa esticar cada pixel original da imagem para preencher a grade física maior; a correção padrão é oferecer uma imagem com resolução real maior, seja via `srcset` com descritor `2x`/`3x`, seja detectando o DPR com `window.devicePixelRatio` e ajustando o canvas antes de desenhar, técnica comum em gráficos gerados via `<canvas>`.

DPR 1, 2 e 3 lado a lado

Painel padrão, sem HiDPI

Entrada: DPR: 1
Saída esperada: 1 pixel CSS = 1 pixel físico

É a configuração de monitores de escritório mais antigos e de boa parte dos monitores externos vendidos até hoje: nenhuma multiplicação acontece entre o layout CSS e o painel físico.

MacBook com tela Retina

Entrada: DPR: 2
Saída esperada: 1 pixel CSS = grade de 4 pixels físicos (2 × 2)

É o DPR mais comum em notebooks Retina e na maioria dos smartphones de gama média, dobrando a densidade em cada eixo sem alterar o tamanho visual do conteúdo.

Celular topo de linha

Entrada: DPR: 3
Saída esperada: 1 pixel CSS = grade de 9 pixels físicos (3 × 3)

DPR 3 é comum em telas de celular de alta densidade compactas; nesses aparelhos, uma imagem `1x` normal aparece visivelmente borrada e só a versão `3x` do `srcset` preenche a grade completa.

FAQ da ferramenta completa

Qual a diferença entre resolução da tela, viewport e resolução física?

A resolução da tela (screen.width e screen.height) é o tamanho do monitor inteiro como o navegador o informa, em pixels CSS. O viewport (window.innerWidth e innerHeight) é apenas a área onde a página é desenhada, então encolhe com a janela, barras, painéis laterais e zoom da página. A resolução física é o número real de pixels do painel, que esta ferramenta estima como pixels CSS vezes o devicePixelRatio. Em um monitor comum com escala de 100% elas coincidem, em celulares e notebooks com escala diferem bastante.

Por que o navegador mostra uma resolução diferente da especificação do meu monitor?

O que é DPR e o que significa Retina?

Como saber a taxa de atualização da minha tela?

1080p, 1440p ou 4K: qual a diferença?

Como mudar a resolução da tela no Windows?

Como mudar a resolução da tela no macOS?

Como mudar a resolução da tela no Linux?

Dá para mudar a resolução da tela no Android ou no iPhone?

Em qual breakpoint estou e por que os breakpoints usam o viewport?

Como o PPI é calculado e o que é a distância de visualização?

A ferramenta coleta ou envia meus dados? Isso é fingerprinting?

Perguntas frequentes

DPR mais alto é sempre melhor?

Não necessariamente para a experiência do usuário: um DPR mais alto exige mais dados de imagem para não borrar (uma imagem `3x` tem nove vezes mais pixels que a `1x` equivalente), o que aumenta o peso da página e o consumo de bateria para renderizar cada frame, então o ganho de nitidez precisa ser balanceado contra performance.

Todo monitor 4K tem DPR 2?

Não: DPR depende da relação entre pixels físicos e o fator de escala configurado no sistema operacional, não só da resolução nominal. Um monitor 4K de 27 polegadas rodando sem escala no Windows pode reportar DPR 1 com pixels CSS minúsculos, enquanto o mesmo painel com escala de 200% reporta DPR 2.

Como sei o DPR do meu aparelho sem código?

Esta ferramenta lê `window.devicePixelRatio` diretamente no seu navegador e mostra o valor na tela; não existe um jeito confiável de adivinhar o DPR pelo modelo do aparelho de fora para dentro, porque o mesmo hardware pode reportar valores diferentes dependendo da escala do sistema operacional escolhida pelo usuário.

Por que uma foto tirada no celular fica pesada mas nítida na tela?

Porque a câmera captura na resolução física total do sensor, muito acima da resolução em pixels CSS da tela; ao exibir essa foto em tamanho reduzido na página, o navegador tem pixels físicos de sobra para preencher a grade do DPR sem esticar nada, e por isso ela parece nítida mesmo ocupando pouco espaço em CSS.

Próximos passos

Breakpoint	A partir de	Até
`base`	0 px	639 px
`sm`	640 px	767 px
`md`	768 px	1.023 px
`lg`	1.024 px	1.279 px
`xl`	1.280 px	1.535 px
`2xl`	1.536 px	e acima

Breakpoint

A partir de

Até

base

0 px

639 px

sm

640 px

767 px

md

768 px

1.023 px

lg

1.024 px

1.279 px

xl

1.280 px

1.535 px

2xl

1.536 px

e acima

Breakpoint	A partir de	Até
`xs`	0 px	575 px
`sm`	576 px	767 px
`md`	768 px	991 px
`lg`	992 px	1.199 px
`xl`	1.200 px	1.399 px
`xxl`	1.400 px	e acima

Breakpoint

A partir de

Até

xs

0 px

575 px

sm

576 px

767 px

md

768 px

991 px

lg

992 px

1.199 px

xl

1.200 px

1.399 px

xxl

1.400 px

e acima

Como sua resolução se compara
Nome	Resolução	Megapixels	Proporção	vs 1080p
HD (720p)	1.280 × 720	0,92	16:9	0,44×
WXGA (HD 768p)	1.366 × 768	1,05	16:9	0,51×
HD+ (900p)	1.600 × 900	1,44	16:9	0,69×
Full HD (1080p)	1.920 × 1.080	2,07	16:9	1×
WUXGA	1.920 × 1.200	2,3	16:10	1,11×
QHD (1440p)	2.560 × 1.440	3,69	16:9	1,78×
UltraWide QHD (UWQHD)	3.440 × 1.440	4,95	21:9	2,39×
4K UHD (2160p)	3.840 × 2.160	8,29	16:9	4×
5K	5.120 × 2.880	14,75	16:9	7,11×
8K UHD (4320p)	7.680 × 4.320	33,18	16:9	16×

Como sua resolução se compara

Nome

Resolução

Megapixels

Proporção

vs 1080p

HD (720p)

1.280 × 720

0,92

16:9

0,44×

WXGA (HD 768p)

1.366 × 768

1,05

16:9

0,51×

HD+ (900p)

1.600 × 900

1,44

16:9

0,69×

Full HD (1080p)

1.920 × 1.080

2,07

16:9

1×

WUXGA

1.920 × 1.200

2,3

16:10

1,11×

QHD (1440p)

2.560 × 1.440

3,69

16:9

1,78×

UltraWide QHD (UWQHD)

3.440 × 1.440

4,95

21:9

2,39×

4K UHD (2160p)

3.840 × 2.160

8,29

16:9

4×

5.120 × 2.880

14,75

16:9

7,11×

8K UHD (4320p)

7.680 × 4.320

33,18

16:9

16×

Continuar na ferramenta

Abrir ferramenta completa

tela retina hidpi e dpr

Tela HiDPI, Retina e DPR

A grade de pixels físicos por trás do DPR

Numa tela HiDPI, o navegador não aumenta o tamanho visual dos elementos, ele aumenta a quantidade de pixels físicos usados para desenhar cada pixel CSS: com DPR 2, cada pixel CSS vira uma grade de 2 por 2, ou seja, 4 pixels físicos; com DPR 3, a grade fica em 3 por 3, ou 9 pixels físicos por pixel CSS. O resultado visual é bordas e texto mais suaves, porque o mesmo desenho tem mais amostras de cor para representar cada detalhe.

O termo Retina nasceu com o iPhone 4 em 2010 e a ideia de marketing por trás dele é que, à distância normal de uso, o olho humano não consegue mais distinguir pixels físicos individuais, então aumentar ainda mais a densidade deixaria de trazer ganho perceptível de nitidez. Tecnicamente, qualquer painel com DPR 2 ou mais se qualifica como HiDPI, seja ele vendido como Retina, 4K, QHD+ ou qualquer outro nome comercial.

Sem otimização, uma imagem raster pensada para DPR 1 fica borrada num painel HiDPI, porque o navegador precisa esticar cada pixel original da imagem para preencher a grade física maior; a correção padrão é oferecer uma imagem com resolução real maior, seja via `srcset` com descritor `2x`/`3x`, seja detectando o DPR com `window.devicePixelRatio` e ajustando o canvas antes de desenhar, técnica comum em gráficos gerados via `<canvas>`.

DPR 1, 2 e 3 lado a lado

Painel padrão, sem HiDPI

Entrada: DPR: 1
Saída esperada: 1 pixel CSS = 1 pixel físico

É a configuração de monitores de escritório mais antigos e de boa parte dos monitores externos vendidos até hoje: nenhuma multiplicação acontece entre o layout CSS e o painel físico.

MacBook com tela Retina

Entrada: DPR: 2
Saída esperada: 1 pixel CSS = grade de 4 pixels físicos (2 × 2)

É o DPR mais comum em notebooks Retina e na maioria dos smartphones de gama média, dobrando a densidade em cada eixo sem alterar o tamanho visual do conteúdo.

Celular topo de linha

Entrada: DPR: 3
Saída esperada: 1 pixel CSS = grade de 9 pixels físicos (3 × 3)

DPR 3 é comum em telas de celular de alta densidade compactas; nesses aparelhos, uma imagem `1x` normal aparece visivelmente borrada e só a versão `3x` do `srcset` preenche a grade completa.

FAQ da ferramenta completa

Qual a diferença entre resolução da tela, viewport e resolução física?

Por que o navegador mostra uma resolução diferente da especificação do meu monitor?

O que é DPR e o que significa Retina?

Como saber a taxa de atualização da minha tela?

1080p, 1440p ou 4K: qual a diferença?

Como mudar a resolução da tela no Windows?

Como mudar a resolução da tela no macOS?

Como mudar a resolução da tela no Linux?

Dá para mudar a resolução da tela no Android ou no iPhone?

Em qual breakpoint estou e por que os breakpoints usam o viewport?

Como o PPI é calculado e o que é a distância de visualização?

A ferramenta coleta ou envia meus dados? Isso é fingerprinting?

Perguntas frequentes

DPR mais alto é sempre melhor?

Todo monitor 4K tem DPR 2?

Como sei o DPR do meu aparelho sem código?

Por que uma foto tirada no celular fica pesada mas nítida na tela?

Breakpoint	A partir de	Até
`base`	0 px	639 px
`sm`	640 px	767 px
`md`	768 px	1.023 px
`lg`	1.024 px	1.279 px
`xl`	1.280 px	1.535 px
`2xl`	1.536 px	e acima

Breakpoint

A partir de

Até

base

0 px

639 px

sm

640 px

767 px

md

768 px

1.023 px

lg

1.024 px

1.279 px

xl

1.280 px

1.535 px

2xl

1.536 px

e acima

Breakpoint	A partir de	Até
`xs`	0 px	575 px
`sm`	576 px	767 px
`md`	768 px	991 px
`lg`	992 px	1.199 px
`xl`	1.200 px	1.399 px
`xxl`	1.400 px	e acima

Breakpoint

A partir de

Até

xs

0 px

575 px

sm

576 px

767 px

md

768 px

991 px

lg

992 px

1.199 px

xl

1.200 px

1.399 px

xxl

1.400 px

e acima

Como sua resolução se compara
Nome	Resolução	Megapixels	Proporção	vs 1080p
HD (720p)	1.280 × 720	0,92	16:9	0,44×
WXGA (HD 768p)	1.366 × 768	1,05	16:9	0,51×
HD+ (900p)	1.600 × 900	1,44	16:9	0,69×
Full HD (1080p)	1.920 × 1.080	2,07	16:9	1×
WUXGA	1.920 × 1.200	2,3	16:10	1,11×
QHD (1440p)	2.560 × 1.440	3,69	16:9	1,78×
UltraWide QHD (UWQHD)	3.440 × 1.440	4,95	21:9	2,39×
4K UHD (2160p)	3.840 × 2.160	8,29	16:9	4×
5K	5.120 × 2.880	14,75	16:9	7,11×
8K UHD (4320p)	7.680 × 4.320	33,18	16:9	16×

Como sua resolução se compara

Nome

Resolução

Megapixels

Proporção

vs 1080p

HD (720p)

1.280 × 720

0,92

16:9

0,44×

WXGA (HD 768p)

1.366 × 768

1,05

16:9

0,51×

HD+ (900p)

1.600 × 900

1,44

16:9

0,69×

Full HD (1080p)

1.920 × 1.080

2,07

16:9

1×

WUXGA

1.920 × 1.200

2,3

16:10

1,11×

QHD (1440p)

2.560 × 1.440

3,69

16:9

1,78×

UltraWide QHD (UWQHD)

3.440 × 1.440

4,95

21:9

2,39×

4K UHD (2160p)

3.840 × 2.160

8,29

16:9

4×

5.120 × 2.880

14,75

16:9

7,11×

8K UHD (4320p)

7.680 × 4.320

33,18

16:9

16×

Continuar na ferramenta

Mais páginas desta ferramenta

Tela HiDPI, Retina e DPR

A grade de pixels físicos por trás do DPR

DPR 1, 2 e 3 lado a lado

Painel padrão, sem HiDPI

MacBook com tela Retina

Celular topo de linha

FAQ da ferramenta completa

Perguntas frequentes

DPR mais alto é sempre melhor?

Todo monitor 4K tem DPR 2?

Como sei o DPR do meu aparelho sem código?

Por que uma foto tirada no celular fica pesada mas nítida na tela?

Próximos passos

Tailwind CSS

Bootstrap 5

Continuar na ferramenta

Mais páginas desta ferramenta

Tela HiDPI, Retina e DPR

A grade de pixels físicos por trás do DPR

DPR 1, 2 e 3 lado a lado

Painel padrão, sem HiDPI

MacBook com tela Retina

Celular topo de linha

FAQ da ferramenta completa

Perguntas frequentes

DPR mais alto é sempre melhor?

Todo monitor 4K tem DPR 2?

Como sei o DPR do meu aparelho sem código?

Por que uma foto tirada no celular fica pesada mas nítida na tela?

Próximos passos

Tailwind CSS

Bootstrap 5