Verificador de Resolução de Tela

Continuar na ferramenta

Mais páginas desta ferramenta

viewport vs resolução de tela

Viewport vs resolução de tela

screen.width e screen.height descrevem o monitor inteiro, mas nenhum media query CSS lê esses valores para decidir breakpoint: quem manda no layout responsivo é window.innerWidth, a viewport real onde a página é desenhada depois de descontar barras do navegador. Essa página isola os dois números para você parar de confundir resolução física com área útil.

Por que breakpoints ignoram a resolução do monitor

Um monitor 1920 × 1080 pode hospedar uma janela de navegador não maximizada, uma segunda tela ao lado ou uma barra do DevTools aberta ocupando parte da largura: em qualquer desses casos, screen.width continua reportando 1920, mas window.innerWidth cai para o tamanho real da área de conteúdo, que pode ser 1200, 900 ou qualquer outro valor. É esse segundo número que decide se uma media query `(max-width: 768px)` deve ou não se aplicar.
Media queries CSS e o operador matchMedia em JavaScript consultam exclusivamente a viewport, nunca a resolução do monitor: por isso um site pode exibir o layout mobile mesmo num monitor 4K, bastando que a janela do navegador esteja estreita, um cenário comum quando duas janelas dividem a tela lado a lado. Projetar a partir de screen.width levaria a decisões erradas de layout em qualquer situação de janela não maximizada.
Vale notar uma terceira medida, window.outerWidth, que inclui a moldura do navegador (barra de endereço, abas, bordas) ao redor da viewport: outerWidth é sempre maior ou igual a innerWidth, e a diferença entre os dois representa exatamente o espaço consumido pela interface do próprio navegador, variável entre Chrome, Firefox e Safari e entre sistemas operacionais.

Três combinações reais de tela e viewport

Monitor 4K, navegador maximizado

Entrada: screen: 3840 × 2160
Saída esperada: innerWidth pode chegar a 3840 (menos a UI do SO)

Só quando a janela ocupa a tela inteira o innerWidth se aproxima do screen.width, e ainda assim descontando qualquer barra de tarefas fixa do sistema operacional.

Notebook com DevTools aberto

Entrada: screen: 1920 × 1080, DevTools ocupando 400px
Saída esperada: innerWidth efetivo: aproximadamente 1520

Abrir o painel do DevTools ancorado lateralmente reduz a viewport disponível para a página exatamente na largura do painel, disparando breakpoints menores mesmo sem redimensionar a janela do navegador.

Duas janelas lado a lado

Entrada: screen: 2560 × 1440, janela ocupando metade
Saída esperada: innerWidth: cerca de 1280

Split view do sistema operacional é a causa mais comum de um usuário ver o layout mobile de um site num monitor grande, porque a viewport reportada é bem menor que a resolução física do monitor.

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

Por que meu site mostra o layout mobile num monitor grande?

Porque a media query está reagindo à largura real da viewport (window.innerWidth), não à resolução do monitor: se a janela do navegador ocupa só metade da tela, num split view ou lado a lado com outro app, a viewport pode ficar abaixo do breakpoint mobile mesmo o monitor sendo 4K.

innerWidth inclui a barra de rolagem?

Não: window.innerWidth já desconta a largura da barra de rolagem vertical quando ela está visível, então o valor reflete a área realmente disponível para o conteúdo da página, diferente de outerWidth, que mede a janela inteira do navegador incluindo toda a moldura.

screen.availWidth é diferente de screen.width?

É: screen.availWidth desconta áreas reservadas pelo sistema operacional, como a barra de tarefas do Windows ou o dock do macOS, enquanto screen.width reporta a resolução bruta do painel; nenhum dos dois, porém, reflete o tamanho da janela do navegador em si.

Devo usar screen.width em algum caso?

Só quando o objetivo é conhecer a capacidade do monitor físico, como escolher a resolução máxima de um vídeo para oferecer ao usuário; para decisões de layout, espaçamento e breakpoint, window.innerWidth é sempre a medida correta porque reflete o espaço real disponível para o conteúdo.

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

viewport vs resolução de tela

Viewport vs resolução de tela

Por que breakpoints ignoram a resolução do monitor

Um monitor 1920 × 1080 pode hospedar uma janela de navegador não maximizada, uma segunda tela ao lado ou uma barra do DevTools aberta ocupando parte da largura: em qualquer desses casos, screen.width continua reportando 1920, mas window.innerWidth cai para o tamanho real da área de conteúdo, que pode ser 1200, 900 ou qualquer outro valor. É esse segundo número que decide se uma media query `(max-width: 768px)` deve ou não se aplicar.

Media queries CSS e o operador matchMedia em JavaScript consultam exclusivamente a viewport, nunca a resolução do monitor: por isso um site pode exibir o layout mobile mesmo num monitor 4K, bastando que a janela do navegador esteja estreita, um cenário comum quando duas janelas dividem a tela lado a lado. Projetar a partir de screen.width levaria a decisões erradas de layout em qualquer situação de janela não maximizada.

Vale notar uma terceira medida, window.outerWidth, que inclui a moldura do navegador (barra de endereço, abas, bordas) ao redor da viewport: outerWidth é sempre maior ou igual a innerWidth, e a diferença entre os dois representa exatamente o espaço consumido pela interface do próprio navegador, variável entre Chrome, Firefox e Safari e entre sistemas operacionais.

Três combinações reais de tela e viewport

Monitor 4K, navegador maximizado

Entrada: screen: 3840 × 2160
Saída esperada: innerWidth pode chegar a 3840 (menos a UI do SO)

Só quando a janela ocupa a tela inteira o innerWidth se aproxima do screen.width, e ainda assim descontando qualquer barra de tarefas fixa do sistema operacional.

Notebook com DevTools aberto

Entrada: screen: 1920 × 1080, DevTools ocupando 400px
Saída esperada: innerWidth efetivo: aproximadamente 1520

Duas janelas lado a lado

Entrada: screen: 2560 × 1440, janela ocupando metade
Saída esperada: innerWidth: cerca de 1280

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

Por que meu site mostra o layout mobile num monitor grande?

innerWidth inclui a barra de rolagem?

screen.availWidth é diferente de screen.width?

Devo usar screen.width em algum caso?

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

Viewport vs resolução de tela

Por que breakpoints ignoram a resolução do monitor

Três combinações reais de tela e viewport

Monitor 4K, navegador maximizado

Notebook com DevTools aberto

Duas janelas lado a lado

FAQ da ferramenta completa

Perguntas frequentes

Por que meu site mostra o layout mobile num monitor grande?

innerWidth inclui a barra de rolagem?

screen.availWidth é diferente de screen.width?

Devo usar screen.width em algum caso?

Próximos passos

Tailwind CSS

Bootstrap 5

Continuar na ferramenta

Mais páginas desta ferramenta

Viewport vs resolução de tela

Por que breakpoints ignoram a resolução do monitor

Três combinações reais de tela e viewport

Monitor 4K, navegador maximizado

Notebook com DevTools aberto

Duas janelas lado a lado

FAQ da ferramenta completa

Perguntas frequentes

Por que meu site mostra o layout mobile num monitor grande?

innerWidth inclui a barra de rolagem?

screen.availWidth é diferente de screen.width?

Devo usar screen.width em algum caso?

Próximos passos

Tailwind CSS

Bootstrap 5