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 na nossa aplicação podemos utilizar JavaScript.

Como acompanhar a orientação do device com javascript?

Temos “N” possibilidades de acompanhar a orientação do device com JavaScript, nesse post vou mostrar duas maneiras bem simples com JavaScript, a primeira observando o evento ‘orientationchange’, para isso adicionamos um listener em na nossa janela com o seguinte código:

window.addEventListener('orientationchange', function(){ // faça alguma coisa });
Code language: JavaScript (javascript)

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; } });
Code language: JavaScript (javascript)

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 um conteúdo específico para o usuário.

matchMedia

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 */ }
Code language: CSS (css)

Podemos validar qualquer media query no CSS3 temos uma regra para verificar a orientação vamos utilizar ela para pegar a 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);
Code language: JavaScript (javascript)

Temos duas opções para verificar a orientação do device com JavaScript. Para saber sobre Progressive web apps eu tenho um curso sobre o assunto. Tenho vídeos gratuítos sobre Desenvolvimento Mobile Web no meu canal do YouTube. Caso tenha qualquer dúvida só deixar um comentário.