Testador de Tamanho de Viewport e Breakpoint Responsivo

A viewport é a área onde uma página da web precisa desenhar — a janela do navegador, menos as abas, a barra de endereços e as barras de rolagem. Por isso, quase sempre é menor que a resolução da sua tela: a tela é o painel inteiro, enquanto a viewport é apenas a fatia que a página pode usar. Ela é medida em pixels CSS, unidades de layout, em vez de pontos físicos — telas 'Retina' de alta densidade empacotam dois ou três pixels físicos em cada pixel CSS para que o texto pareça mais nítido, e window.devicePixelRatio reporta esse multiplicador.

Esta ferramenta lê window.innerWidth e window.innerHeight a cada mudança de redimensionamento e orientação, junto com a viewport de layout do documentElement.clientWidth/clientHeight, a proporção de pixels do seu dispositivo e a orientação. Um breakpoint é a largura de uma viewport na qual um layout muda — colunas se empilham, um menu colapsa, o texto muda de tamanho — e frameworks como o Tailwind CSS aplicam estilos a partir de um conjunto de larguras nomeadas para cima. A referência abaixo destaca a faixa em que sua largura se encaixa, e o painel de teste arrastável informa o breakpoint que sua largura atingiria, então você pode pré-visualizar um componente sem redimensionar toda a janela. Tudo é rodado localmente; nada é enviado.

Se os números parecerem errados, várias coisas ficam entre a resolução do seu painel e a viewport que uma página vê. A interface do navegador e as barras de rolagem subtraem da área utilizável, e o zoom da página reduz a contagem de pixels CSS — então innerWidth diminui sem que a janela se mova — assim como a escala da exibição do sistema operacional, por isso dois monitores idênticos podem reportar tamanhos diferentes. Nos celulares, a tag meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, posiciona a página na largura do dispositivo em vez de simular um desktop ~980px, então uma viewport de 390 px em DPR 3 fica em um painel com aproximadamente 1170 pixels físicos de diâmetro. Para ver a resolução física completa e a densidade de pixels da sua tela, use as ferramentas What Is My Screen Size e Screen Resolution Test.

Breakpoints responsivos comuns