Como a ferramenta mede o tamanho da tela
Usando recursos do seu próprio navegador, a ferramenta capta as dimensões físicas da tela, o tamanho do viewport do navegador e a área disponível descontando barras de tarefas e docks do sistema operacional. O cálculo é feito em tempo real usando JavaScript, sem envio de dados para servidores.
O resultado inclui tanto a resolução total da tela, quanto o espaço realmente disponível para exibição de páginas web, além da proporção de pixels (devicePixelRatio) que influencia o detalhamento das imagens e a adaptação de layouts responsivos.
Diferença entre resolução, viewport e área útil
A resolução da tela representa o total de pixels físicos disponíveis no monitor, como 1920x1080. O viewport é a área que o navegador oferece para os sites, descontando barras, menus e abas. Já a área disponível considera o espaço sem elementos fixos do sistema, como barra de tarefas ou dock, sendo útil para testar aplicações em tela cheia.
Entender essas diferenças é essencial para quem trabalha com design responsivo, pois cada métrica influencia de maneira distinta a experiência do usuário final.
Quando usar cada tipo de medida
Para construir layouts adaptáveis, o tamanho do viewport é a referência principal, pois define o quanto do site será visível ao usuário. Já a resolução da tela ajuda a prever o detalhamento de imagens e gráficos, principalmente em dispositivos de alta densidade de pixels, como telas Retina.
A área disponível é relevante para aplicações que precisam ocupar todo o espaço possível, como apresentações, editores de imagem ou vídeos em tela cheia. Saber distinguir essas medidas permite escolhas mais precisas e melhores resultados no desenvolvimento web.
Perguntas frequentes
Por que a resolução exibida é menor que a do meu monitor?
Muitos dispositivos usam a proporção de pixels (devicePixelRatio) para exibir mais detalhes em menos espaço. Assim, a área disponível para sites pode parecer menor do que a resolução física do monitor. Além disso, barras do sistema e do navegador ocupam parte da tela.
Qual medida devo usar ao criar layouts responsivos?
O tamanho do viewport é o mais importante para layouts responsivos, pois representa o espaço visível ao usuário dentro do navegador. Use-o como referência para breakpoints e design adaptável.
Como garantir imagens nítidas em telas de alta densidade?
Verifique o devicePixelRatio do dispositivo. Para telas com valores maiores que 1, use imagens em maior resolução e recursos como <code>srcset</code> no HTML para garantir nitidez em qualquer tela.
Qual a diferença entre tamanho da tela e do viewport?
O tamanho da tela é a quantidade total de pixels do monitor; o viewport é só a parte disponível para o conteúdo do site, descontando menus, barras e janelas do sistema.
Como o navegador determina a área útil disponível?
O navegador calcula a área útil descontando elementos do sistema operacional, como barra de tarefas ou dock, mas não inclui elementos internos da página ou zoom. Os dados vêm diretamente das APIs públicas do navegador.
Problema ou sugestão para esta ferramenta? Conte para nós