Detectar a rotação do dispositivo no navegador no Android com JavaScript

Desafios de compatibilidade na detecção de rotação

Detectar a rotação do dispositivo usando JavaScript no o navegador pode ser mais desafiador em telefones Android em comparação com iPhones, que possuem uma abordagem bem definida. O comportamento em dispositivos Android pode ser inconsistente, com variações na sequência e frequência de eventos e mudanças em valores como screen.width e window.orientation.

Abordagem confiável para detecção de rotação

Para resolver essas inconsistências, é recomendável ouvir os eventos redimensionar e orientaçãoChange e implementar a pesquisa como medida de segurança. Essa abordagem garante que você eventualmente receberá um valor de orientação válido.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);

Sequências de eventos e alterações de valores

A sequência de eventos e as alterações nos valores variam entre os dispositivos. Aqui está uma tabela que resume os resultados de vários dispositivos:

Considerações adicionais

Embora essa abordagem forneça uma maneira confiável de detectar a rotação do dispositivo, é importante manter em mente as limitações do JavaScript neste contexto. Por exemplo, determinados valores como screen.width nem sempre podem mudar conforme o esperado. Também é recomendado evitar depender apenas de screen.width devido ao seu comportamento inconsistente em dispositivos iOS.