Tamanho da tela, janela e página em JavaScript: 5 erros fatais e como evitá-los

Tamanho importa: por que scripts "quebram" o layout

Imagine: você escreve um site responsivo perfeito, testa no seu notebook — tudo funciona. Abre no tablet do cliente — bug. Elementos se sobrepõem, a janela modal sai para fora da tela, e alguma galeria simplesmente se recusa a abrir. Familiar?

Na maioria das vezes, a raiz do problema é a obtenção incorreta dos tamanhos da tela, da janela do navegador ou da própria página. A pergunta "Get the size of the screen, current web page and browser window" no Stack Overflow acumulou centenas de milhares de visualizações. E não é por acaso: mesmo desenvolvedores experientes confundem screen.width, window.innerWidth e document.documentElement.clientWidth.

Neste artigo, vamos analisar os 5 erros mais comuns que iniciantes (e não só) cometem ao trabalhar com tamanhos em JavaScript. Você receberá não apenas teoria, mas também soluções prontas e testadas para problemas reais.

Top 5 erros ao trabalhar com tamanhos em JavaScript

Erro nº 1: Usar screen.width em vez de window.innerWidth

Isso é clássico. O desenvolvedor quer saber a largura da área de visualização (viewport) e escreve:

// ❌ Incorreto\nconst viewportWidth = screen.width;\nconsole.log(viewportWidth); // 1920 (mas isso não é o viewport!)\n

Qual é o problema? screen.width retorna a largura física do monitor em pixels. Ela não muda se você reduzir a janela do navegador ou abrir as ferramentas do desenvolvedor. Já window.innerWidth é a largura da área de visualização (viewport), ou seja, a parte da janela onde o conteúdo é exibido.

Quando isso quebra o site: Se você calcula blocos responsivos com base em screen.width, ao abrir o DevTools ou reduzir a janela, o site não se reorganiza. O usuário vê espaços vazios ou sobreposição de elementos.

// ✅ Correto\nconst viewportWidth = window.innerWidth;\nconsole.log(viewportWidth); // Largura atual da área visível\n

Erro nº 2: Esquecer a barra de rolagem (scrollbar)

A segunda armadilha mais popular. O desenvolvedor obtém a altura da janela e tenta posicionar um elemento exatamente no meio:

// ❌ Incorreto\nconst windowHeight = window.innerHeight;\nelement.style.top = windowHeight / 2 + 'px';\n

À primeira vista, está tudo certo. Mas se o conteúdo for maior que a tela e houver uma barra de rolagem, window.innerHeight inclui a altura dela. Como resultado, o elemento pode "escapar" para fora do limite inferior da área visível.

Solução: Use document.documentElement.clientHeight — ele retorna a altura do viewport sem considerar a barra de rolagem.

// ✅ Correto para posicionamento na área visível\nconst viewportHeight = document.documentElement.clientHeight;\nelement.style.top = viewportHeight / 2 + 'px';\n

\n

Lembre-se da regra: window.innerWidth/innerHeight — com a barra de rolagem. document.documentElement.clientWidth/clientHeight — sem a barra de rolagem. Escolha conforme a necessidade.

\n

Erro nº 3: Confundir tamanho da janela com tamanho da página

Você quer saber até onde o usuário rolou e calcula a altura total da página:

// ❌ Incorreto\nconst pageHeight = window.innerHeight;\nconsole.log(pageHeight); // Isso não é a altura da página!\n

window.innerHeight é a altura da janela, não do documento. Para obter a altura total da página (incluindo a parte rolada), você precisa usar document.documentElement.scrollHeight.

Exemplo real: Você está criando um feed infinito (infinite scroll). Se usar window.innerHeight para determinar o momento de carregar novos posts, o script será executado uma vez e não