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.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.