JS Largura da Tela - Javascript

Quando estamos criando uma aplicação em Javascript, muitas vezes precisamos saber a largura da tela do usuário que está acessando o website. Isso pode ser necessário para criar um design responsivo, por exemplo. Felizmente, o Javascript possui uma funcionalidade que nos permite obter a largura da tela.

Usando a propriedade window.innerWidth

A propriedade window.innerWidth retorna a largura da área de conteúdo de uma janela no navegador. Ela inclui as barras de rolagem, mas desconsidera a barra de ferramentas do navegador e outras barras de status.

Veja o exemplo abaixo:

const larguraDaTela = window.innerWidth;
console.log(`A largura da tela é ${larguraDaTela}px`);

Este código irá imprimir a largura da tela atual no console do navegador. Observe o uso da template string (${}) para concatenar a largura da tela à string de impressão.

Adicionando um Event Listener para Detectar Mudanças na Largura da Tela

Às vezes, pode ser necessário detectar mudanças na largura da tela, por exemplo, para atualizar o layout da página em resposta a uma mudança no tamanho da janela. Podemos fazer isso adicionando um event listener para o evento resize.

Veja o exemplo abaixo:

window.addEventListener('resize', () => {
  const larguraDaTela = window.innerWidth;
  console.log(`A largura da tela foi alterada para ${larguraDaTela}px`);
});

Este código irá adicionar um event listener que irá imprimir a nova largura da tela toda vez que a janela for redimensionada pelo usuário.

Conclusão

Em resumo, a propriedade window.innerWidth é uma forma simples e direta de obter a largura da tela em Javascript. Adicionando um event listener para o evento resize, podemos monitorar mudanças na largura da tela e atualizar o layout da página em tempo real.