Diagnóstico de tela e ambiente
Informações detalhadas sobre sua tela, navegador e dispositivo. Dados em tempo real úteis para usuários comuns, designers e desenvolvedores web.
Tela
@media em CSS e para os breakpoints do Bootstrap.col-*, d-* e fs-* estão ativas agora.srcset.@media (orientation: landscape). Atualiza automaticamente.Navegador
navigator.language). Sites podem usá-lo para mostrar conteúdo no idioma preferido sem que o usuário precise selecioná-lo.navigator.onLine. Útil para apps com suporte offline (PWA). Indica se o navegador tem acesso à rede agora.—
Dispositivo
navigator.maxTouchPoints). 0 = sem touchscreen.navigator.hardwareConcurrency). Indica o grau de paralelismo possível com Web Workers e tarefas em segundo plano.navigator.deviceMemory). O navegador reporta um valor arredondado (0,25, 0,5, 1, 2, 4 ou 8 GB) para proteger a privacidade do usuário.Compartilhar diagnóstico
Copie todos os dados como texto simples para colar em um e-mail, Slack ou ticket de suporte.
O que esta ferramenta não consegue mostrar
a Web não expõe o tamanho físico em polegadas/cm — apenas pixels CSS e o Device Pixel Ratio (DPR)
— Dois celulares diferentes podem reportar exatamente o mesmo viewport e o mesmo DPR (por exemplo, ambos «390×844 @3x») e ainda assim ter um tamanho de tela físico diferente: um pode ser uma tela de 5,4 polegadas e o outro de 6,1. Isso acontece porque os fabricantes Android agrupam suas telas em "buckets" de densidade (mdpi, hdpi, xhdpi, xxhdpi...) que abstraem deliberadamente o tamanho físico da contagem de pixels CSS — a Web (e esta ferramenta) simplesmente não tem como acessar as polegadas reais do painel. Por isso, se duas pessoas comparam esses dados achando que "suas telas são iguais", podem estar vendo escalas físicas bem diferentes.
PPI = √(px_largura² + px_altura²) ÷ polegadas_diagonais
— Esta ferramenta mostra a largura e a altura em pixels físicos (resolução real), mas não a diagonal em polegadas, porque a Web não a expõe. Se você buscar a ficha técnica do seu dispositivo e souber sua diagonal (por exemplo, 6,1"), pode calcular sua densidade de pixels real: com uma resolução física de 1170×2532 px e uma diagonal de 6,1", o PPI é √(1170² + 2532²) ÷ 6,1 ≈ 457 ppi.
O que significa cada leitura?
Explicação detalhada de cada métrica exibida por esta ferramenta. Seja você designer, desenvolvedor ou usuário comum, este glossário ajudará a interpretar os valores corretamente.
O viewport é a região do navegador que exibe o conteúdo de uma página web. É a largura e altura disponíveis dentro da janela, sem contar a barra de ferramentas, abas ou barra de rolagem.
No CSS, o viewport é a referência para as media queries: @media (max-width: 768px) é ativado quando a largura do viewport é menor que 768 px. Também é a base para as unidades vw (viewport width) e vh (viewport height).
No JavaScript, é obtido com window.innerWidth e window.innerHeight.
Breakpoints são os pontos nos quais o design responsivo altera seu comportamento. O Bootstrap 5 define 6:
- xs — menos de 576 px (celulares pequenos em retrato)
- sm — a partir de 576 px (celulares em paisagem)
- md — a partir de 768 px (tablets)
- lg — a partir de 992 px (notebooks)
- xl — a partir de 1200 px (desktops)
- xxl — a partir de 1400 px (telas grandes)
Conhecer seu breakpoint permite saber exatamente quais classes CSS do Bootstrap estão ativas: col-md-6, d-lg-flex, etc.
O Device Pixel Ratio é a proporção entre os pixels físicos do hardware e os pixels CSS lógicos que o navegador usa para calcular o layout.
- DPR = 1 — Tela padrão. 1 px CSS = 1 px físico.
- DPR = 2 — Retina / HiDPI. 1 px CSS = 2×2 = 4 px físicos.
- DPR = 3 — Alta densidade (celulares modernos). 1 px CSS = 3×3 = 9 px físicos.
Isso é crítico para designers: uma imagem de 200×200 px em uma tela DPR 2 ficará borrada. A solução é usar srcset ou image-set().
Acesse pelo JavaScript com window.devicePixelRatio.
Resolução lógica é o que o navegador usa para calcular o layout (pixels CSS). Resolução física é o número real de pixels no painel: resolução lógica × DPR.
Por exemplo, um iPhone 15 tem resolução lógica de 390×844 px CSS, mas sua tela física é 1170×2532 px reais (DPR = 3). A resolução física é o valor listado nas especificações do fabricante.
O tamanho do documento inclui todo o conteúdo, incluindo o que está fora do viewport (scroll). Em condições normais, a largura do documento deve ser igual à do viewport.
Se a largura do documento exceder o viewport, há overflow horizontal: uma barra de rolagem horizontal aparece, fundos não chegam à borda ou o conteúdo transborda da área visível no celular. Use document.documentElement.scrollWidth.
O User Agent é uma string de texto que o navegador envia ao servidor em cada requisição HTTP, via cabeçalho User-Agent. Contém informações sobre o navegador, sua versão e o sistema operacional.
Servidores e aplicações web analisam o User Agent para detectar o tipo de cliente, servir recursos otimizados, personalizar conteúdo e gerar análises de audiência.
O motor de renderização interpreta HTML e CSS e desenha a página na tela. Os principais são:
- Blink — Chrome, Edge, Opera, Brave e a maioria dos navegadores baseados em Chromium.
- WebKit — Safari no macOS e iOS. Por política da Apple, todos os navegadores no iOS devem usar WebKit.
- Gecko — Mozilla Firefox.
As diferenças entre motores explicam por que a mesma página pode parecer diferente no Safari e no Chrome.
Via Network Information API (disponível principalmente no Chrome e Edge), o navegador consegue estimar: tipo de conexão efetiva (4g, 3g, 2g, slow-2g), velocidade de download em Mbps, latência RTT em ms e se o usuário tem modo economia de dados ativo.
Esta seção não aparece se o navegador não suportar a API (Firefox e Safari não a expõem por razões de privacidade).
srcset. Testadores e QA a usam para verificar o comportamento responsivo em dispositivos específicos, detectar overflow e confirmar que o User Agent é identificado corretamente. Professores de desenvolvimento web a projetam em aula para explicar de forma visual e interativa conceitos como viewport, DPR, media queries e breakpoints. Agências e consultorias digitais a têm à mão como referência rápida ao trabalhar com frameworks CSS, construtores de páginas ou ferramentas de design como Figma.