Verificador de Resolução de Tela

Veja em tempo real a resolução da sua tela, a área disponível, o tamanho da janela do navegador (viewport), a densidade de pixels, a proporção, a orientação e o breakpoint — e veja tudo atualizar na hora ao redimensionar a janela.

Resolução da tela

—

Área disponível

—

Tamanho do viewport

—

Redimensione a janela do navegador ou gire o dispositivo e cada valor é atualizado em tempo real. Tudo é lido localmente — nada é enviado para lugar nenhum.

O Verificador de Resolução de Tela do ToolsSoup é uma leitura em tempo real das dimensões do seu monitor e do seu navegador. Ele mostra a resolução completa da tela ao lado da área disponível e do tamanho atual do viewport do navegador, lado a lado, e então detalha a densidade de pixels, a resolução física real em pixels do dispositivo, a proporção, a orientação e em qual breakpoint responsivo o seu viewport se encaixa. Cada número é atualizado na hora quando você redimensiona a janela ou gira o dispositivo, e tudo roda localmente no seu navegador.

O que é o Verificador de Resolução de Tela?

É um verificador de tela ao vivo que lê as dimensões do seu monitor e do viewport pelas APIs screen e window do navegador e as mostra conforme elas mudam. A resolução da tela é o tamanho completo do seu monitor em pixels CSS; a área disponível é a tela menos as barras do sistema, como a barra de tarefas ou o dock; o tamanho do viewport é a área visível dentro da janela do navegador. Ele também deriva a densidade de pixels, a resolução física (pixels CSS multiplicados pela densidade de pixels), a proporção simplificada, a orientação e a categoria de breakpoint da largura atual do viewport.

Como verificar a resolução da sua tela

Não há nada para digitar — os valores aparecem automaticamente e ficam ao vivo:

  1. Abra a ferramenta e a resolução da tela, a área disponível e o tamanho do viewport carregam na hora nos três cartões superiores.
  2. Leia as linhas de detalhe abaixo para densidade de pixels, resolução física, proporção, orientação e breakpoint.
  3. Redimensione a janela do navegador ou gire o dispositivo e veja cada valor atualizar em tempo real, e use Copiar tudo para copiar o relatório completo.

Resolução da tela vs tamanho do viewport

A resolução da tela é o tamanho de todo o seu monitor, o mesmo valor para qualquer site que você visita. O tamanho do viewport é apenas a área que a sua página web pode realmente usar — ela diminui quando a janela não está maximizada, quando as ferramentas de desenvolvedor estão acopladas, ou quando as barras do navegador e as barras de rolagem ocupam espaço. Designers testam contra o viewport porque é a ele que o layout responsivo reage, enquanto a resolução da tela permanece fixa independentemente do tamanho da janela.

Por que usar este verificador de resolução de tela?

  • Mostra a resolução da tela, a área disponível e o tamanho do viewport do navegador lado a lado para que a diferença fique óbvia.
  • Atualiza ao vivo conforme você redimensiona a janela ou gira o dispositivo — sem precisar recarregar ou clicar em botão.
  • Calcula a resolução física real a partir dos pixels CSS e da densidade de pixels para telas de alta densidade e Retina.
  • Informa a proporção simplificada, a orientação retrato/paisagem e o breakpoint celular/tablet/desktop em que o seu viewport se encaixa.
  • Roda inteiramente no seu navegador — nada é enviado, registrado ou armazenado.

Perguntas frequentes

Qual é a diferença entre resolução da tela e tamanho do viewport?

A resolução da tela é o tamanho total em pixels do seu monitor e nunca muda enquanto você navega. O tamanho do viewport é a área dentro da janela do navegador em que a sua página é renderizada; ele fica menor quando a janela não está maximizada ou quando ferramentas de desenvolvedor acopladas, barras de rolagem e barras de ferramentas ocupam espaço. Layouts responsivos reagem ao viewport, não à tela.

Por que a minha resolução física é maior que a resolução da tela informada?

Em telas de alta densidade e Retina, o navegador informa pixels CSS, não pixels físicos do dispositivo. A ferramenta multiplica a resolução CSS pela sua densidade de pixels para estimar a resolução física, então uma tela CSS de 1512 × 982 com densidade de pixels 2 tem cerca de 3024 × 1964 pixels físicos.

Os valores mudam quando eu redimensiono o navegador?

Sim. O tamanho do viewport, a proporção, a orientação e o breakpoint estão ligados à janela do navegador, então são atualizados ao vivo toda vez que você a redimensiona ou gira o dispositivo. A resolução da tela e a área disponível refletem todo o monitor e só mudam se você trocar de tela ou alterar as configurações de exibição do sistema.

Qual é a diferença em relação à ferramenta Informações do Navegador?

A ferramenta Informações do Navegador lista muitos detalhes estáticos do ambiente — user agent, sistema operacional, fuso horário e assim por diante — incluindo uma única linha de tela e de viewport. Esta ferramenta foca apenas nas dimensões de exibição, mostra-as de forma proeminente lado a lado, deriva a proporção, a orientação, a resolução física e o breakpoint, e mantém cada valor ao vivo conforme você redimensiona.