Como pegar as dimensões da janela do navegador?

Neste artigo você vai aprender a como pegar as dimensões da janela do navegador, ou seja, as dimensões do monitor do usuário

Fala programador(a), beleza? Bora aprender mais sobre dimensões da tela e navegador com JavaScript

Basicamente vamos acessar o document, um objeto que contém diversos métodos e também propriedades do documento, ou seja, HTML

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Nele teremos acesso a documentElement, que possui duas propriedades

• clientWidth: para a largura;
• clientHeight: para a altura;

E então teremos os valores que precisamos

Veja um exemplo prático:

const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;

console.log(height);
console.log(width);

Veja que inserimos os valores para variáveis e posteriormente os imprimimos

Este valor vai variar dependendo do tamanho da janela do browser, ou seja, se houver alguma redução ele diminui ou aumenta

Conclusão

Neste artigo você aprendeu a como pegar as dimensões da janela do navegador com JS

Utilizamos propriedades de document e documentElement, que nos dão a altura e largura do navegador

Lembrando que este resultado varia conforme o tamanho da janela do browser

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!