Função em javascript para retornar o tamanho da tela e resolução

Este código é bom para quem quer desenvolver sites responsivo e precisa está reestruturando o layout de acordo com o tamanho da tela utilizando códigos em javascript ou jquery.

Espero que este código seja útil para você assim como é para mim.
Se possível deixe seu cometário avaliando.

 <script>   
 ///IRÁ CHAMAR A FUNÇÃO PARA ORGANIZAR O LAYOUT DE ACORDO COM O REDIMENSIONAMENTO DA TELA //
  window.addEventListener('resize', function(){   
  organizarLayout();   
  });   
 ///////////////////////////////////  
 ////// FUNÇÃO QUE RETORNARÁ A LARGURA E COMPRIMENTO DA TELA E DA RESOLUÇÃO/////  
  function tamanhoTela(){   
  var windowWidth = window.innerWidth; //retorna a largura da tela   
  var windowHeight = window.innerHeight; //retorna o comprimento da tela   
  var screenWidth = screen.width; //retorna a largura da resolução   
  var screenHeight = screen.height; //retorna o comprimento da resolução   
  var array = [windowWidth,windowHeight,screenWidth,screenHeight]//retorna a largura e comprimento da tela e resolução   
  return array;   
  };   
 ///////////////////////////////////  
 /// DENTRO DESTA FUNÇÃO VOCÊ CRIA SUA REGRA DE ORGANIZAÇÃO DO LAYOUT DE ACORDO COM O TAMANHO DA TELA/////  
  function organizarLayout(){   
   var size = tamanhoTela(); //recebe o retorno em array da função tamanhoTela() com os valores de acordo com o tamanho da tela  
   if(size[0]<=720){ ///caso o tamanho da tela seja menor ou igual a 720px  
    setTimeout(function(){   
     //// insere aqui o código que mudará o layout para se adaptar ao tamanho da tela especificado no "if"  
    },100);   
   }else{   
     setTimeout(function(){  
    //// insere o código aqui que mudará o layout para se adaptar ao tamanho da tela diferente do especificado no primeiro "if"  
     },100);  
   }   
  }   
  organizarLayout();   
 /////////////////  
</script>  

0 comentários:

Postar um comentário