Observe a orientação do device com JavaScript

Com Javascript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico em nossa aplicação podemos utilizar JavaScript. Temos “N” possibilidades de acompanhar a orientação do device, nesse post vou mostrar duas maneiras bem simples, a primeira observando o evento ‘orientationchange’, para isso adicionamos um listener em em nossa janela com o seguinte código:

 window.addEventListener('orientationchange', function(){
   	// faça alguma coisa
   });

O código acima acompanha quando a orientação do device muda, mas como sabemos que o usuário está em landscape ou portrait, para isso pegamos a orientação do device, com window.orientation essa propriedade retorna a rotação do device:

window.addEventListener('orientationchange', function(){
   	switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
   });

Com as informações sobre a rotação do device sabemos que 90 ou -90 o device está em landscape e diferente disso portrait. No código acima foi disparado somente um alert, mas poderíamos chamar alguma outra função, editar uma classe de um elemento ou adicionar uma conteúdo específico para o usuário.

A segunda opção seria com matchMedia ela faz parte da Web API Interface com ela podemos validar media queries por exemplo:

if (window.matchMedia("(min-width: 360px)").matches) {
  /* O view port tem pelo menos 360px de largura */
} else {
  /* o view port tem menos de 360px de largura */
}

Podemos validar qualquer media query no CSS3 temos uma regra para  verificar a orientação vamos utilizar ela para pegar  o orientação do nosso device:

function handleOrientationChange(mediaQuerie) {
  	if (mediaQuerie.matches) {
    		alert("portrait")
  	} else {
    		alert("landscape")
  	}
}

/* Criamos uma variável para armazenar a media querie */
var mediaQuerie = window.matchMedia("(orientation: portrait)");

/* Adicionamos um listenr para acompanhar a mudança de orientação */
mediaQuerie.addListener(handleOrientationChange);

Temos ai duas opções para verificar a orientação do device.

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.