Detecte a resolução da tela e do viewport, com suporte a teste de breakpoints responsivos e atualização em tempo real ao redimensionar
Ferramentas práticas
Sobre esta ferramenta
A ferramenta de Detecção de Resolução de Tela exibe instantaneamente a resolução da sua tela, tamanho do viewport, proporção de pixels do dispositivo, área de tela disponível, orientação e breakpoints responsivos — todas as informações são atualizadas em tempo real conforme você redimensiona a janela do navegador.
Principais funcionalidades
- Detecção instantânea de resolução de tela e tamanho do viewport
- Exibição da proporção de pixels do dispositivo e área de tela disponível
- Exibição da orientação atual (paisagem ou retrato)
- Indicador de breakpoints responsivos (XS, SM, MD, LG, XL, XXL)
- Atualização em tempo real ao redimensionar a janela do navegador
- Sem necessidade de instalação, roda completamente no navegador
Casos de uso
- Verificar a resolução da tela e o tamanho do viewport para desenvolvimento web
- Verificar qual breakpoint responsivo corresponde ao layout atual
- Testar a responsividade do site em diferentes tamanhos de janela
- Identificar a proporção de pixels do dispositivo para testes de tela de alta DPI
- Verificar rapidamente a orientação da tela durante o trabalho de design responsivo
screen
resolution
viewport
Perguntas frequentes
Quais informações a ferramenta de detecção de resolução de tela exibe?
A ferramenta exibe a resolução da sua tela, tamanho do viewport, proporção de pixels do dispositivo, área de tela disponível, orientação atual (paisagem ou retrato) e o breakpoint responsivo ao qual o viewport pertence.
Qual é a diferença entre resolução de tela e tamanho do viewport?
A resolução de tela é o tamanho físico em pixels do monitor (ex.: 1920x1080). O tamanho do viewport é a área visível da janela do navegador, que geralmente é menor que a tela cheia devido à interface do navegador, barra de tarefas e configurações de zoom.
O que é a proporção de pixels do dispositivo?
A proporção de pixels do dispositivo (DPR) é a razão entre pixels físicos da tela e pixels CSS. Um DPR de 2 significa que cada pixel CSS usa 2x2 pixels físicos, comum em telas Retina e de alta DPI. Isso afeta a renderização de imagens e o design responsivo.
Como testar breakpoints responsivos?
A ferramenta exibe em tempo real a largura e altura atuais do viewport. Redimensione a janela do navegador para ver as mudanças de tamanho. Isso ajuda a identificar quais breakpoints CSS estão ativos em diferentes tamanhos de janela.
É possível detectar a orientação da tela?
Sim. A ferramenta exibe se a tela está em modo retrato ou paisagem, o que é especialmente útil ao testar layouts responsivos em dispositivos móveis ou monitores rotacionados.