Verificador de Resolução de Tela

Continuar na ferramenta

Mais páginas desta ferramenta

css pixels e device pixel ratio

CSS pixels e devicePixelRatio

screen.width e screen.height descrevem a tela inteira em pixels CSS, window.innerWidth mede só a viewport visível dentro do navegador, e devicePixelRatio (DPR) conta quantos pixels físicos o monitor usa para desenhar um único pixel CSS. Essa calculadora expõe os três números lado a lado para acabar com a confusão entre eles.

Três medidas, três finalidades diferentes

screen.width e screen.height reportam a resolução total do monitor em pixels CSS, incluindo a área ocupada por barras de tarefas e outras janelas: é um valor de hardware ajustado pelo fator de escala do sistema operacional, não a área que a página realmente ocupa. window.innerWidth e window.innerHeight, por outro lado, medem só a viewport, a área de conteúdo dentro do navegador, sem barra de endereço, abas nem barras de rolagem, e é esse par de números que media queries e o layout responsivo devem consultar.
devicePixelRatio é a razão entre pixels físicos do painel e pixels CSS do layout: em uma tela comum, DPR vale 1 e cada pixel CSS ocupa exatamente um pixel físico; em um display de alta densidade, DPR pode valer 2 ou 3. Um exemplo concreto: numa tela com DPR 2, uma viewport de 390 pixels CSS de largura ocupa 780 pixels físicos reais, o dobro em cada eixo, porque o navegador desenha cada pixel CSS usando uma grade de pixels físicos do tamanho do DPR.
O pixel CSS não é definido por um tamanho físico fixo, mas por referência a um ângulo visual: a especificação CSS Values and Units do W3C fixa o pixel de referência como o ângulo visto por um observador a uma distância de leitura típica, e é por isso que um mesmo valor de `width: 100px` parece do mesmo tamanho aproximado num celular seguro na mão e num monitor de mesa, mesmo com densidades de pixels físicos completamente diferentes entre os dois aparelhos.

Três leituras de DPR na prática

Monitor externo comum

Entrada: screen: 1920 × 1080, DPR: 1
Saída esperada: Viewport física ≈ igual à CSS: 1920 × 1080 pixels físicos

DPR 1 é o padrão em monitores externos mais antigos e em boa parte dos monitores de escritório: cada pixel CSS do layout corresponde a exatamente um pixel físico do painel, sem nenhum reescalonamento pelo navegador.

Notebook com tela HiDPI

Entrada: viewport: 390 px CSS, DPR: 2
Saída esperada: Pixels físicos usados: 780 × altura correspondente

Multiplicar a largura da viewport pelo DPR dá a contagem de pixels físicos que o painel realmente acende para desenhar aquela viewport, útil para saber que resolução de imagem exportar sem desperdiçar banda.

Celular com DPR 3

Entrada: screen.width: 430 px CSS, DPR: 3
Saída esperada: Pixels físicos por eixo: 1290

Telas de celular topo de linha costumam usar DPR 3, então uma imagem `srcset` com descritor `3x` precisa ter três vezes a largura em pixels do elemento para não borrar em zoom.

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

Zoom do navegador muda o devicePixelRatio?

Sim: aumentar o zoom da página eleva o DPR relatado pelo navegador na mesma proporção, porque o zoom redesenha o conteúdo com mais pixels físicos por pixel CSS; é por isso que devicePixelRatio deve ser lido de novo a cada evento de resize, nunca guardado em cache no carregamento da página.

Por que `srcset` usa descritores como `2x` e `3x`?

Porque esses descritores dizem ao navegador para escolher a imagem certa conforme o DPR do dispositivo sem que o CSS precise mudar: numa tela DPR 2, o navegador baixa a versão marcada `2x`, que tem o dobro de pixels físicos da versão base, mantendo a nitidez sem redimensionar a imagem em tempo real.

screen.width e window.innerWidth podem ser iguais?

Podem, quando o navegador está maximizado sem nenhuma barra lateral do sistema operacional visível, mas normalmente window.innerWidth é menor, porque desconta a área de barras de rolagem e a moldura do próprio navegador; nunca assuma que os dois valores coincidem em produção.

matchMedia('(min-resolution: 2dppx)') serve para quê?

Serve para aplicar CSS condicional a telas de alta densidade sem depender de JavaScript no runtime: a media query `min-resolution` compara diretamente o DPR do dispositivo contra o limiar informado, permitindo trocar background-image por uma versão de maior resolução só quando o painel realmente tem pixels físicos suficientes para aproveitá-la.

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

css pixels e device pixel ratio

CSS pixels e devicePixelRatio

Três medidas, três finalidades diferentes

screen.width e screen.height reportam a resolução total do monitor em pixels CSS, incluindo a área ocupada por barras de tarefas e outras janelas: é um valor de hardware ajustado pelo fator de escala do sistema operacional, não a área que a página realmente ocupa. window.innerWidth e window.innerHeight, por outro lado, medem só a viewport, a área de conteúdo dentro do navegador, sem barra de endereço, abas nem barras de rolagem, e é esse par de números que media queries e o layout responsivo devem consultar.

devicePixelRatio é a razão entre pixels físicos do painel e pixels CSS do layout: em uma tela comum, DPR vale 1 e cada pixel CSS ocupa exatamente um pixel físico; em um display de alta densidade, DPR pode valer 2 ou 3. Um exemplo concreto: numa tela com DPR 2, uma viewport de 390 pixels CSS de largura ocupa 780 pixels físicos reais, o dobro em cada eixo, porque o navegador desenha cada pixel CSS usando uma grade de pixels físicos do tamanho do DPR.

O pixel CSS não é definido por um tamanho físico fixo, mas por referência a um ângulo visual: a especificação CSS Values and Units do W3C fixa o pixel de referência como o ângulo visto por um observador a uma distância de leitura típica, e é por isso que um mesmo valor de `width: 100px` parece do mesmo tamanho aproximado num celular seguro na mão e num monitor de mesa, mesmo com densidades de pixels físicos completamente diferentes entre os dois aparelhos.

Três leituras de DPR na prática

Monitor externo comum

Entrada: screen: 1920 × 1080, DPR: 1
Saída esperada: Viewport física ≈ igual à CSS: 1920 × 1080 pixels físicos

Notebook com tela HiDPI

Entrada: viewport: 390 px CSS, DPR: 2
Saída esperada: Pixels físicos usados: 780 × altura correspondente

Celular com DPR 3

Entrada: screen.width: 430 px CSS, DPR: 3
Saída esperada: Pixels físicos por eixo: 1290

Telas de celular topo de linha costumam usar DPR 3, então uma imagem `srcset` com descritor `3x` precisa ter três vezes a largura em pixels do elemento para não borrar em zoom.

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

Zoom do navegador muda o devicePixelRatio?

Por que `srcset` usa descritores como `2x` e `3x`?

screen.width e window.innerWidth podem ser iguais?

matchMedia('(min-resolution: 2dppx)') serve para quê?

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

CSS pixels e devicePixelRatio

Três medidas, três finalidades diferentes

Três leituras de DPR na prática

Monitor externo comum

Notebook com tela HiDPI

Celular com DPR 3

FAQ da ferramenta completa

Perguntas frequentes

Zoom do navegador muda o devicePixelRatio?

Por que `srcset` usa descritores como `2x` e `3x`?

screen.width e window.innerWidth podem ser iguais?

matchMedia('(min-resolution: 2dppx)') serve para quê?

Próximos passos

Tailwind CSS

Bootstrap 5

Continuar na ferramenta

Mais páginas desta ferramenta

CSS pixels e devicePixelRatio

Três medidas, três finalidades diferentes

Três leituras de DPR na prática

Monitor externo comum

Notebook com tela HiDPI

Celular com DPR 3

FAQ da ferramenta completa

Perguntas frequentes

Zoom do navegador muda o devicePixelRatio?

Por que `srcset` usa descritores como `2x` e `3x`?

screen.width e window.innerWidth podem ser iguais?

matchMedia('(min-resolution: 2dppx)') serve para quê?

Próximos passos

Tailwind CSS

Bootstrap 5