Como executar uma função do javascript se a janela do browser diminuir de 800px?

Fala Leonardo blz?

Vc pode usar o script abaixo:

    if( $(window).width() < 800){
        /*faça algo*/
    }

Você pode usar o elemento 'window' do Javascript para verificar o tamanho da tela. Exemplo:

x = window.screen.width;
y = window.screen.height;

if(x <800){
//Ação aqui
}

Fala Leonardo,

As soluções acima funcionam, mas acho que você quer saber o exato momento em que houve a mudança de tamanho, estou certo?

Se for assim acredito que você pode usar a função abaixo:

document.body.onresize = function() {
    if (document.body.clientWidth < 800) {
        //executar o código aqui dentro
    }
};

Espero ter ajudado!

Abraços!

Muito bom Luiz, sua solução parece ótima se for para saber exatamente o momento da mudança de tamanho da tela. Não conhecia essa abordagem.

E ai Fábio,

Obrigado,

Informo também que as soluções acima não estão erradas, mas apenas uma breve explicação da diferença entre usar window.screen.width e document.body.clientWidth.

window.screen.width : Ele pega o tamanho da tela do usuário, sendo assim pega o tamanho da tela do monitor, tablet, celular e etc., e não o tamanho da janela do navegador.

document.body.clientWidth : Ele pega o tamanho da janela do navegador do usuário, existem outros jeitos também com os códigos abaixo, este que usei é usado para pegar o tamanho caso o usuário esteja usando navegadores antigos e novos.

• window.innerWidth
• document.documentElement.clientWidth
• document.body.clientWidth

Existe uma documentação para isso aqui neste LINK, e eu dei uma olhada nela e refatorei o meu código para ser abrangente:

window.onresize = function() {
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (w < 800) {
        //executar o código aqui dentro
    }
};

Excelente Luiz, interessante que haja uma maneira de verificar isso em "qualquer" navegador. O Object document está realmente bem completo, tem muitas informações boas para serem usadas.

Acho que o mais interessante aí é não usar JQuery sem necessidade, usando só o VanillaJS.