Détecter la rotation du téléphone Android dans le navigateur avec JavaScript

Je sais que dans Safari sur un iPhone, vous pouvez détecter l'orientation de l'écran et le changement d'orientation en écoutant l' onorientationchangeévénement et en window.orientationrecherchant l'angle.

Est-ce possible dans le navigateur sur les téléphones Android?

Pour être clair, je demande si la rotation d'un appareil Android peut être détectée par JavaScript s'exécutant sur une page Web standard. C'est possible sur un iPhone, et je me suis demandé si cela pouvait être fait pour les téléphones Android.

Pour détecter un changement d'orientation sur un navigateur Android, associez un écouteur à l' événement orientationchangeou resizesur 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);

Vérifiez la window.orientationpropriété pour déterminer l'orientation de l'appareil. Avec les téléphones Android, screen.widthou screen.heightégalement des mises à jour lorsque l'appareil est tourné. (ce n'est pas le cas avec l'iPhone).

Le comportement réel sur les différents appareils est incohérent . Les événements resize et orientationChange peuvent se déclencher dans une séquence différente avec une fréquence variable. De plus, certaines valeurs (par exemple screen.width et window.orientation) ne changent pas toujours lorsque vous vous y attendez. Évitez screen.width - cela ne change pas lors de la rotation dans iOS.

L'approche fiable consiste à écouter à la fois les événements de redimensionnement et d'orientationChange (avec une interrogation comme prise de sécurité), et vous obtiendrez finalement une valeur valide pour l'orientation. Lors de mes tests, les appareils Android ne parviennent parfois pas à déclencher des événements lors d'une rotation complète de 180 degrés.J'ai donc également inclus un setInterval pour interroger l'orientation.

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);

Voici les résultats des quatre appareils que j'ai testés (désolé pour le tableau ASCII, mais cela semblait être le moyen le plus simple de présenter les résultats). Mis à part la cohérence entre les appareils iOS, il existe une grande variété entre les appareils. REMARQUE: les événements sont répertoriés dans l'ordre de leur déclenchement.

| ================================================== ============================== |
| Appareil | Événements déclenchés | orientation | innerWidth | screen.width |
| ================================================== ============================== |
| iPad 2 | redimensionner | 0 | 1024 | 768 |
| (au paysage) | orientationchange | 90 | 1024 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPad 2 | redimensionner | 90 | 768 | 768 |
| (au portrait) | orientationchange | 0 | 768 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | redimensionner | 0 | 480 | 320 |
| (au paysage) | orientationchange | 90 | 480 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | redimensionner | 90 | 320 | 320 |
| (au portrait) | orientationchange | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Téléphone Droid | orientationchange | 90 | 320 | 320 |
| (au paysage) | redimensionner | 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Téléphone Droid | orientationchange | 0 | 569 | 569 |
| (au portrait) | redimensionner | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | orientationchange | 0 | 400 | 400 |
| Tablette | orientationchange | 90 | 400 | 400 |
| (au paysage) | orientationchange | 90 | 400 | 400 |
| | redimensionner | 90 | 683 | 683 |
| | orientationchange | 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | orientationchange | 90 | 683 | 683 |
| Tablette | orientationchange | 0 | 683 | 683 |
| (au portrait) | orientationchange | 0 | 683 | 683 |
| | redimensionner | 0 | 400 | 400 |
| | orientationchange | 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

L'excellente réponse de two-bit-fool fournit tout le contexte, mais laissez-moi tenter un résumé concis et pragmatique de la façon de gérer les changements d'orientation sur iOS et Android :

• Si vous ne vous souciez que des dimensions de la fenêtre (le scénario typique) - et non de l'orientation spécifique:
  • Gérez l' resizeévénement uniquement.
  • Dans votre gestionnaire, agissez sur window.innerWidthet window.InnerHeightseulement.
  • NE PAS utiliser window.orientation- il ne sera pas à jour sur iOS.

• Si vous vous souciez de l' orientation spécifique :
  • Gérez uniquement l' resizeévénement sur Android et uniquement l' orientationchangeévénement sur iOS.
  • Dans votre gestionnaire, agissez sur window.orientation(et window.innerWidthet window.InnerHeight)

Ces approches offrent de légers avantages par rapport à se souvenir de l'orientation précédente et à comparer:

• L'approche basée uniquement sur les dimensions fonctionne également lors du développement sur des navigateurs de bureau qui peuvent autrement simuler des appareils mobiles, par exemple Chrome 23. ( window.orientationn'est pas disponible sur les navigateurs de bureau).
• pas besoin d'une variable globale / anonyme au niveau du fichier de fonction.

Vous pouvez toujours écouter l'événement de redimensionnement de la fenêtre. Si, lors de cet événement, la fenêtre est passée de plus haute que large à plus large que haute (ou vice versa), vous pouvez être à peu près sûr que l'orientation du téléphone vient d'être modifiée.

C'est possible en HTML5.
Vous pouvez en savoir plus (et essayer une démo en direct) ici: http://slides.html5rocks.com/#slide-orientation .

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

Il prend également en charge les navigateurs de bureau, mais il renvoie toujours la même valeur.

J'ai eu le même problème. J'utilise Phonegap et Jquery mobile, pour les appareils Adroid. Pour redimensionner correctement, j'ai dû définir un délai d'attente:

$(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);
}

Voici la solution:

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");
            }   
        });
    }

Un autre problème - certaines tablettes Android (le Motorola Xoom je crois et un Elonex bas de gamme sur lequel je fais des tests, probablement d'autres aussi) ont leurs accéléromètres configurés de sorte que window.orientation == 0 en mode LANDSCAPE, pas en mode portrait !

vous pouvez essayer la solution, compatible avec tous les navigateurs.

Voici la orientationchangephoto de compatibilité: par conséquent, je orientaionchangecrée un polyfill, c'est un attribut basé sur @media pour corriger la bibliothèque de l'utilitaire orientationchange—— orientationchange-fix

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

Il convient de noter que sur mon Epic 4G Touch, j'ai dû configurer la vue Web pour utiliser WebChromeClient avant que les appels javascript Android ne fonctionnent.

webView.setWebChromeClient(new WebChromeClient());

Traverser le navigateur

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

Une petite contribution à la réponse du fou à deux bits:

Comme décrit sur le tableau sur les téléphones droïdes, l'événement "orientationchange" est déclenché plus tôt que l'événement "resize" bloquant ainsi le prochain appel de redimensionnement (à cause de l'instruction if). La propriété Width n'est toujours pas définie.

Une solution de contournement mais peut-être pas parfaite pourrait être de ne pas déclencher l'événement "orientationchange". Cela peut être archivé en encapsulant la liaison d'événement "orientationchange" dans l'instruction "if":

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

J'espère que cela aide

(les tests ont été effectués sur Nexus S)