Qual é a resolução da minha tela? Viewport, DPR e breakpoints | We.Inc
Veja ao vivo a resolução da sua tela, o tamanho da viewport do navegador e o device pixel ratio, além de qual breakpoint do Tailwind e do Bootstrap você está e uma tabela de tamanhos de dispositivos comuns.
A resolução da sua tela aparece no primeiro quadro desta página, medida pelo seu navegador ao carregá-la. Ela é informada em pixels CSS; multiplique pelo device pixel ratio para obter os pixels físicos. A página também mostra a viewport do navegador, que é o tamanho que o seu site realmente recebe, e se atualiza ao vivo enquanto você redimensiona.
O que cada número significa
Medida
O que é
Tela
O display inteiro, em pixels CSS
Viewport
A área visível da página dentro da janela do navegador
Device pixel ratio
Pixels físicos por pixel CSS (2 ou 3 na maioria dos celulares)
Resolução física
O tamanho da tela multiplicado pelo pixel ratio
Tamanho da tela, tamanho da viewport, device pixel ratio, orientação e profundidade de cor, lidos ao vivo do seu navegador. A ferramenta também diz em qual breakpoint do Tailwind e do Bootstrap a janela atual está, com media queries para copiar e uma tabela de tamanhos de dispositivos comuns.
Abra a página. Os números vêm dos objetos screen e window do seu navegador, então nada é instalado e nada é enviado a lugar nenhum.
Redimensione a janela ou gire o celular. A viewport, o breakpoint e a orientação se atualizam na hora.
Confira o painel de breakpoints para ver quais breakpoints do Tailwind e do Bootstrap valem na largura atual.
Copie uma media query de qualquer breakpoint, ou compare os seus números com a tabela de dispositivos abaixo.
Projete para larguras de viewport, não para resoluções de tela. Uma tela de 1920 pixels pode mostrar uma janela de navegador de 1200 pixels, e essa janela é tudo o que o seu layout recebe.
Teste com 360 e 390 pixels de largura. Muitos celulares Android informam de 360 a 412 pixels CSS e os iPhones recentes de 375 a 440, então um layout que funciona em 360 cobre a maioria dos celulares.
Forneça imagens com o dobro do tamanho em que são exibidas, ou use srcset, para que fiquem nítidas em telas com pixel ratio de 2 ou mais.
O zoom do navegador muda tanto a viewport quanto o pixel ratio. Se os números parecerem estranhos, redefina o zoom com Ctrl+0 ou Cmd+0 e confira de novo.
Perguntas frequentes
Por que a resolução da minha tela parece menor do que a informada pelo monitor?
Os navegadores informam os tamanhos em pixels CSS. Quando o sistema operacional aplica escala ao display, por exemplo 150% em um monitor 4K ou em qualquer Mac com tela Retina, um pixel CSS cobre vários pixels físicos. Multiplique o tamanho da tela pelo device pixel ratio mostrado aqui para obter a resolução física.
Qual é a diferença entre tamanho da tela e tamanho da viewport?
O tamanho da tela é o display inteiro. O tamanho da viewport é a parte da janela do navegador que mostra a página, sem a barra de endereço, as abas, as barras de ferramentas e os painéis fixados. Os sites são diagramados com base na viewport, então esse é o número a usar no design responsivo.
O que é device pixel ratio?
É o número de pixels físicos usados para desenhar um pixel CSS em cada direção. Um ratio de 1 é um display padrão, 2 é comum em notebooks com telas de alta densidade e em tablets, e 3 é comum em celulares. Ele também muda quando você dá zoom na página.
Quais breakpoints devo usar no design responsivo?
Comece pelos padrões do seu framework, listados nesta página para Tailwind e Bootstrap, e depois adicione um breakpoint onde o seu próprio conteúdo começar a parecer apertado ou esticado. Os breakpoints devem seguir o conteúdo, não dispositivos específicos.
Algo sobre o meu dispositivo fica armazenado?
Não. Os valores são lidos no seu navegador e exibidos na página. Eles não são enviados para nós nem salvos.
Pixels CSS e pixels físicos
Um pixel CSS é uma unidade de comprimento, não um ponto na tela. Em um celular com pixel ratio de 3, uma caixa de 100 por 100 pixels CSS é desenhada com 300 por 300 pixels físicos. É por isso que um celular com um painel de 1179 pixels de largura diz aos sites que tem 393 pixels de largura: o navegador mostra uma página que se lê em um tamanho confortável e a desenha com mais detalhe.
Para o layout, só os pixels CSS importam. Para as imagens, os pixels físicos também contam, porque uma imagem exatamente da largura da sua caixa em pixels CSS vai parecer borrada em uma tela com ratio de 2 ou 3.
Breakpoints na prática
Tailwind e Bootstrap são mobile first: estilos sem prefixo valem em qualquer largura, e cada breakpoint adiciona regras a partir da sua largura mínima para cima. md no Tailwind significa 768 pixels ou mais, não apenas tablets.
O painel de breakpoints desta página mede a viewport do mesmo jeito que as media queries desses frameworks, então o que ele mostra é o conjunto de classes que estaria ativo nesta janela agora.
Breakpoints padrão de min-width no Tailwind CSS e no Bootstrap 5
Framework
Breakpoint
Vale a partir de
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Tamanhos de viewport de dispositivos comuns em pixels CSS (retrato), com pixel ratio e pixels físicos
Tipo
Dispositivo ou configuração
Viewport (px CSS)
Pixel ratio
Pixels físicos
Celular
iPhone SE (2ª e 3ª geração)
Celular
iPhone 13 e 14
Celular
iPhone 15 e 16
Celular
iPhone 16 Pro
Celular
iPhone 15 Plus e 16 Plus
Celular
iPhone 16 Pro Max
Celular
Samsung Galaxy S24
Celular
Google Pixel 8
Tablet
iPad mini (6ª geração)
Tablet
iPad (10ª geração)
Tablet
iPad Pro de 11 polegadas (4ª geração)
Tablet
iPad Pro de 12.9 polegadas
Notebook
Notebook HD
Notebook
Full HD com escala de 125%
Notebook
MacBook Air de 13 polegadas (M2, padrão)
Desktop
Monitor Full HD
Desktop
Monitor QHD
Desktop
Monitor 4K com escala de 150%
Retrato
Paisagem
Copiar media query {name}
Tela {sw}×{sh} (física {pw}×{ph}), viewport {vw}×{vh}, device pixel ratio {dpr}
A sua tela agora
Resolução da tela (px CSS)
Proporção {ratio}
Resolução física
Tela × device pixel ratio
Viewport do navegador
A área em que a sua página é diagramada
Device pixel ratio
Muda com o zoom do navegador
Tela disponível
Tela menos a barra de tarefas ou o dock
Orientação e cor
{orientation}, {depth} bits
Tela sensível ao toque detectada
Nenhuma tela sensível ao toque detectada
Copiar estes números
Lendo a sua tela. Isso requer JavaScript.
Em qual breakpoint você está
Medido na largura da viewport{width}. Redimensione a janela para ver a mudança.