Detectar rotação do telefone Android no navegador com JavaScript

Eu sei que no Safari em um iPhone você pode detectar a orientação da tela e mudar de orientação ouvindo o onorientationchangeevento e consultando window.orientationo ângulo.

Isso é possível no navegador de telefones Android?

Para esclarecer, pergunto se a rotação de um dispositivo Android pode ser detectada pelo JavaScript em execução em uma página da web padrão. É possível em um iPhone, e me perguntei se isso poderia ser feito para telefones Android.

Para detectar uma alteração de orientação em um navegador Android, anexe um ouvinte ao evento orientationchangeou resizeem window:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

Verifique a window.orientationpropriedade para descobrir em que direção o dispositivo está orientado. Com telefones Android, screen.widthou screen.heighttambém atualiza conforme o dispositivo é rotacionado. (esse não é o caso do iPhone).

O comportamento real em diferentes dispositivos é inconsistente . Os eventos redimensionar e guidanceChange podem ser disparados em uma sequência diferente com frequência variável. Além disso, alguns valores (por exemplo, screen.width e window.orientation) nem sempre mudam quando você espera. Evite screen.width - ele não muda ao girar no iOS.

A abordagem confiável é ouvir os eventos de redimensionamento e de orientação e alterar (com algumas pesquisas como uma captura de segurança) e, eventualmente, você obterá um valor válido para a orientação. Nos meus testes, os dispositivos Android ocasionalmente falham em disparar eventos ao girar 180 graus, por isso também incluí um setInterval para pesquisar a orientação.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

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

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

Aqui estão os resultados dos quatro dispositivos que testei (desculpe pela tabela ASCII, mas parecia a maneira mais fácil de apresentar os resultados). Além da consistência entre os dispositivos iOS, há muita variedade entre os dispositivos. NOTA: Os eventos são listados na ordem em que foram disparados.

| =================================================== ============================= |
| Dispositivo | Eventos demitidos | orientação | innerWidth | screen.width |
| =================================================== ============================= |
| iPad 2 | redimensionar | 0 1024 768
| (para paisagem) | mudança de orientação | 90 1024 768
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPad 2 | redimensionar | 90 768 768
| (para retrato) | mudança de orientação | 0 768 768
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | redimensionar | 0 480 320
| (para paisagem) | mudança de orientação | 90 480 320
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | redimensionar | 90 320 320
| (para retrato) | mudança de orientação | 0 320 320
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Telefone droid | mudança de orientação | 90 320 320
| (para paisagem) | redimensionar | 90 569 569
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Telefone droid | mudança de orientação | 0 569 569
| (para retrato) | redimensionar | 0 320 320
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | mudança de orientação | 0 400 400
| Tablet | mudança de orientação | 90 400 400
| (para paisagem) | mudança de orientação | 90 400 400
| | redimensionar | 90 683 683
| | mudança de orientação | 90 683 683
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | mudança de orientação | 90 683 683
| Tablet | mudança de orientação | 0 683 683
| (para retrato) | mudança de orientação | 0 683 683
| | redimensionar | 0 400 400
| | mudança de orientação | 0 400 400
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

A excelente resposta do tolo de dois bits fornece todo o pano de fundo, mas deixe-me tentar um resumo conciso e pragmático de como lidar com as mudanças de orientação no iOS e no Android :

• Se você se importa apenas com as dimensões da janela (o cenário típico) - e não com a orientação específica:
  • Manipule resizeapenas o evento.
  • Em seu manipulador, agir sobre window.innerWidthe window.InnerHeightúnica.
  • NÃO use window.orientation- não será atualizado no iOS.

• Se você se importa com a orientação específica :
  • Manipule apenas o resizeevento no Android e somente o orientationchangeevento no iOS.
  • No seu manipulador, atue em window.orientation(e window.innerWidthe window.InnerHeight)

Essas abordagens oferecem pequenos benefícios sobre a lembrança da orientação anterior e a comparação:

• a abordagem apenas de dimensões também funciona durante o desenvolvimento em navegadores de desktop que, de outra forma, podem simular dispositivos móveis, por exemplo, Chrome 23. ( window.orientationnão está disponível em navegadores de desktop).
• não há necessidade de uma variável global / anônima no nível do arquivo, no nível da função do wrapper.

Você sempre pode ouvir o evento de redimensionamento da janela. Se, nesse caso, a janela passou de mais alta do que larga para mais larga do que alta (ou vice-versa), você pode ter certeza de que a orientação do telefone foi alterada.

É possível em HTML5.
Você pode ler mais (e experimentar uma demonstração ao vivo) aqui: http://slides.html5rocks.com/#slide-orientation .

window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
}, false);

Ele também suporta navegadores de mesa, mas sempre retornará o mesmo valor.

Eu tive o mesmo problema. Estou usando o Phonegap e o Jquery mobile, para dispositivos Adroid. Para redimensionar corretamente, tive que definir um tempo limite:

$(window).bind('orientationchange',function(e) {
  fixOrientation();
});

$(window).bind('resize',function(e) {
  fixOrientation();
});

function fixOrientation() {

    setTimeout(function() {

        var windowWidth = window.innerWidth;

        $('div[data-role="page"]').width(windowWidth);
        $('div[data-role="header"]').width(windowWidth);
        $('div[data-role="content"]').width(windowWidth-30);
        $('div[data-role="footer"]').width(windowWidth);

    },500);
}

Aqui está a solução:

var isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent);
    },
    iOS: function() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
};
if(isMobile.Android())
    {
        var previousWidth=$(window).width();
        $(window).on({
        resize: function(e) {
        var YourFunction=(function(){

            var screenWidth=$(window).width();
            if(previousWidth!=screenWidth)
            {
                previousWidth=screenWidth;
                alert("oreientation changed");
            }

        })();

        }
    });

    }
    else//mainly for ios
    {
        $(window).on({
            orientationchange: function(e) {
               alert("orientation changed");
            }   
        });
    }

Outra dica: alguns tablets Android (o Motorola Xoom que acredito e um Elonex de baixo custo que estou testando, provavelmente outros também) têm seus acelerômetros configurados para que window.orientation == 0 no modo PAISAGEM, não retrato !

você pode experimentar a solução, compatível com todos os navegadores.

A seguir, é apresentada uma orientationchangefoto de compatibilidade: portanto, eu orientaionchangeautorio um polyfill, que é baseado no atributo @media para corrigir a biblioteca de utilitários de positionchange—— orientedchange -fix

window.addEventListener('orientationchange', function(){
 if(window.neworientation.current === 'portrait|landscape'){
    // do something……
 } else {
    // do something……
 }
}, false);

Vale ressaltar que, no Epic 4G Touch, tive que configurar a visualização na web para usar o WebChromeClient antes que qualquer uma das chamadas javascript no Android funcionasse.

webView.setWebChromeClient(new WebChromeClient());

Caminho entre navegadores

$(window).on('resize orientationchange webkitfullscreenchange mozfullscreenchange fullscreenchange',  function(){
//code here
});

Uma pequena contribuição para a resposta do idiota:

Conforme descrito na tabela em telefones droid, o evento "orientedchange" é acionado antes do evento "redimensionar", bloqueando a próxima chamada de redimensionamento (por causa da instrução if). A propriedade Width ainda não está definida.

Uma solução alternativa, embora talvez não perfeita, poderia ser a de não acionar o evento "mudança de orientação". Isso pode ser arquivado envolvendo a ligação de evento "guidancechange" na instrução "if":

if (!navigator.userAgent.match(/android/i))
{
    window.addEventListener("orientationchange", checkOrientation, false);
}

Espero que ajude

(testes foram feitos no Nexus S)