Neste artigo você vai aprender a como pegar altura e largura da página com JavaScript, de uma maneira muito simples e com recursos nativos

pegar a altura e largura da página com JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também como resgatar as propriedades referentes a tela/navegador!

Para a nossa alegria, os desenvolvedores da linguagem JS foram muito eficazes em resolver este problema

Temos acesso ao objeto window, que possui o objeto screen

Este objeto tem diversas informações sobre o navegador, como a altura e largura, que é o que precisamos!

Então vamos ver um exemplo prático do resgate destas informações:

var altura = window.screen.height;
var largura = window.screen.width;

console.log(altura);
console.log(largura);

As propriedades são width, para largura, e height, para altura

Desta maneira conseguimos resgatar os valores necessários para realizar alguma outra lógica do nosso software

Lembrando que este dados são referentes ao monitor

Já se você precisa dos dados da janela/browser, o código é este:

var largura = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var altura = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

console.log(altura);
console.log(largura);

Com este snippet você consegue obter a altura e largura da área útil aberta no navegador

Ao redimensionar a tela, estes valores também serão alterados!

Conclusão

Neste artigo você aprendeu a como pegar a altura e largura da página com JavaScript

Utilizamos duas estratégias, o objeto screen: para receber a altura e largura da tela do usuário

E depois um snippet que nos ajuda a receber a área útil da tela aberta no momento, que pode ser alterada com o redimensionamento do usuário

Agora basta escolher qual das duas abordagens se encaixa a sua necessidade e aplicar no seu código a escolhida!

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Inscrever-se
Notificar de
guest

3 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
Luiz Henrique

Boa noite Matheus,
Tentei utilizar esse script em meu código para obter o tamanho da tela quando é redimensionada, mas não funciona, apenas pega o valor inicial.

Luan Duarte Silva

Luiz, para que seja atualizado a cada movimento da tela, deve-se jogar essas variaveis dentro de uma função, exemplo:

var altura = 0
var largura = 0

function ajustarTela(){
     altura = window.innerWidth;
     largura = window.innerHeight;

}

e no html colocar a função –> onresize=”ajustarTela()” em algum elemento, para que quando a tela for redimensionada ele chamar a função ajustarTela() e esta função pegar os valores da altura e largura

Douglas de Aquino

Muito obrigado pela informação!
estou tentando criar um jogo em Javascript e prescisava dessas informações, escolhi Html porque é tranquilo de escrever no celular e como é por pura diverção não vi problemas nisso.