Como detectar resolução da tela com JavaScript

Neste artigo você vai aprender a como detectar resolução da tela com JavaScript, vem conferir como é simples fazer isso!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução

A resolução da tela é uma medida importante quando se trata de desenvolver aplicativos e sites responsivos.

A resolução da tela refere-se ao número total de pixels na tela, geralmente expressa como a largura e a altura em pixels.

Ao detectar a resolução da tela, os desenvolvedores podem ajustar o layout e a funcionalidade de seus aplicativos para oferecer uma experiência de usuário otimizada em diferentes dispositivos e tamanhos de tela.

Neste artigo, vamos explorar como detectar a resolução da tela com JavaScript.

Acessando a resolução da tela com window.screen

A maneira mais simples de detectar a resolução da tela com JavaScript é acessar as propriedades width e height do objeto window.screen.

Essas propriedades retornam a largura e a altura totais da tela em pixels.

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

console.log(`Resolução da tela: ${screenWidth}x${screenHeight}`);

Este exemplo exibe a resolução da tela no formato “Resolução da tela: largura x altura”.

Observe que as propriedades width e height do objeto window.screen retornam a resolução real do dispositivo, não a resolução do navegador ou da janela de visualização.

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

Acessando a resolução da janela de visualização com window.innerWidth e window.innerHeight

Se você deseja detectar a resolução da janela de visualização do navegador em vez da resolução da tela, pode usar as propriedades window.innerWidth e window.innerHeight.

Essas propriedades retornam a largura e a altura da área de conteúdo da janela de visualização, incluindo barras de rolagem, se houver.

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

console.log(`Resolução da janela de visualização: ${viewportWidth}x${viewportHeight}`);

Este exemplo exibe a resolução da janela de visualização no formato “Resolução da janela de visualização: largura x altura”.

Observe que as propriedades window.innerWidth e window.innerHeight podem mudar quando o usuário redimensiona a janela do navegador.

Ouvindo eventos de redimensionamento da janela

Em muitos casos, você pode querer ajustar seu aplicativo dinamicamente quando a resolução da tela ou da janela de visualização muda.

Para fazer isso, você pode adicionar um ouvinte de evento para o evento resize da janela.

window.addEventListener("resize", () => {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  console.log(`Resolução da janela de visualização: ${viewportWidth}x${viewportHeight}`);
});

Este exemplo adiciona um ouvinte de evento que é chamado sempre que a janela do navegador é redimensionada.

Ele exibe a resolução atual da janela de visualização no formato “Resolução da janela de visualização: largura x altura”.

Considerações de desempenho

Ao detectar a resolução da tela com JavaScript e ajustar seu aplicativo dinamicamente, é importante considerar o desempenho.

Ouvir eventos de redimensionamento da janela e atualizar o layout e a funcionalidade do aplicativo pode ser intensivo em recursos, especialmente se a janela for redimensionada com frequência ou se o aplicativo for complexo.

Aqui estão algumas dicas para melhorar o desempenho ao lidar com a resolução da tela:

Throttling e Debouncing

Throttling e debouncing são técnicas que ajudam a limitar a taxa de chamadas de uma função.

Ao utilizar essas técnicas, você pode garantir que seu aplicativo não seja sobrecarregado com chamadas desnecessárias de função durante eventos de redimensionamento.

Throttling limita a taxa de chamadas de função, garantindo que a função seja chamada no máximo uma vez a cada ‘x’ milissegundos.

Debouncing, por outro lado, agrupa várias chamadas de função juntas e chama a função apenas uma vez após um determinado intervalo de tempo ter passado.

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

window.addEventListener(
  "resize",
  debounce(() => {
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    console.log(`Resolução da janela de visualização: ${viewportWidth}x${viewportHeight}`);
  }, 250)
);

Neste exemplo, a função debounce é usada para limitar a taxa de chamadas do ouvinte de evento de redimensionamento.

Atualizações seletivas

Em vez de atualizar todo o layout e a funcionalidade do aplicativo a cada evento de redimensionamento, considere atualizar apenas os elementos que são afetados pela mudança na resolução.

Isso pode melhorar significativamente o desempenho e reduzir a carga na CPU.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo, exploramos como detectar a resolução da tela e da janela de visualização com JavaScript e como ajustar o layout e a funcionalidade do aplicativo dinamicamente com base na resolução.

Discutimos o uso do objeto window.screen e das propriedades window.innerWidth e window.innerHeight, bem como técnicas para melhorar o desempenho, como throttling, debouncing e atualizações seletivas.

Ao utilizar essas técnicas, você pode criar aplicativos e sites responsivos que oferecem uma experiência de usuário otimizada em diferentes dispositivos e tamanhos de tela.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Bloco novo mostrando como jogar a resolução direto num alert() em vez de só no console, que é exatamente o que muita gente digita na busca

Muita vez tu não quer abrir o console, só quer ver a resolução na cara na hora de testar

Pra isso dá pra usar o alert() concatenando a largura e a altura com um x no meio

alert(window.innerWidth + " x " + window.innerHeight)

Isso abre uma caixinha do navegador com algo tipo "1366 x 768", a largura, um x e a altura

O window.innerWidth te dá a largura da janela de visualização e o window.innerHeight a altura, então esse alerta mostra o tamanho da área visível do navegador

Se tu quiser a resolução real da tela do dispositivo em vez da janela, é só trocar por window.screen:

alert(window.screen.width + " x " + window.screen.height)

Dá pra usar aspas simples também, o resultado é o mesmo:

alert(window.innerWidth + ‘ x ‘ + window.innerHeight)

Bloco de FAQ curto respondendo as dúvidas mais diretas de quem cai no post

Como mostrar a resolução em um alerta? Usa o alert() concatenando largura e altura: alert(window.innerWidth + " x " + window.innerHeight) mostra o tamanho da janela numa caixinha do navegador

Qual a diferença entre window.screen e window.innerWidth? O window.screen.width e window.screen.height retornam a resolução real da tela do dispositivo

Já o window.innerWidth e window.innerHeight retornam o tamanho da janela de visualização do navegador, que muda quando tu redimensiona a janela

O alert mostra a tela ou o navegador? Depende do que tu colocar dentro: com window.innerWidth mostra a janela do navegador, com window.screen.width mostra a tela do dispositivo