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

Question

Je sais que dans Safari sur un iPhone, vous pouvez détecter l'orientation de l'écran et le changement d'orientation en écoutant le signal onorientationchange et l'interrogation window.orientation pour 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.

Answer 1

L'actuel le comportement sur différents appareils est incohérent . Les événements de redimensionnement et de changement d'orientation peuvent être déclenchés dans un ordre différent et à une fréquence variable. En outre, certaines valeurs (par exemple, screen.width et window.orientation) ne changent pas toujours au moment prévu. Éviter screen.width -- il ne change pas lors de la rotation dans iOS.

L'approche fiable consiste à écouter les événements resize et orientationChange. (avec quelques interrogations par sécurité), et vous obtiendrez éventuellement une valeur valide pour l'orientation. Lors de mes tests, il est arrivé que les appareils Android ne déclenchent pas d'événements lors d'une rotation complète de 180 degrés, c'est pourquoi j'ai é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 y a beaucoup de variété entre les appareils. NOTE : Les événements sont listés dans l'ordre dans lequel ils ont été déclenchés.

|==============================================================================|
|     Device     | Events Fired      | orientation | innerWidth | screen.width |
|==============================================================================|
| iPad 2         | resize            | 0           | 1024       | 768          |
| (to landscape) | orientationchange | 90          | 1024       | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPad 2         | resize            | 90          | 768        | 768          |
| (to portrait)  | orientationchange | 0           | 768        | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 0           | 480        | 320          |
| (to landscape) | orientationchange | 90          | 480        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 90          | 320        | 320          |
| (to portrait)  | orientationchange | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 90          | 320        | 320          |
| (to landscape) | resize            | 90          | 569        | 569          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 0           | 569        | 569          |
| (to portrait)  | resize            | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Samsung Galaxy | orientationchange | 0           | 400        | 400          |
| Tablet         | orientationchange | 90          | 400        | 400          |
| (to landscape) | orientationchange | 90          | 400        | 400          |
|                | resize            | 90          | 683        | 683          |
|                | orientationchange | 90          | 683        | 683          |
|----------------+-------------------+-------------+------------+--------------|
| Samsung Galaxy | orientationchange | 90          | 683        | 683          |
| Tablet         | orientationchange | 0           | 683        | 683          |
| (to portrait)  | orientationchange | 0           | 683        | 683          |
|                | resize            | 0           | 400        | 400          |
|                | orientationchange | 0           | 400        | 400          |
|----------------+-------------------+-------------+------------+--------------|

Answer 2

La réponse courte est "OUI". Pour détecter un changement d'orientation dans un navigateur Android, ajoutez un écouteur pour l'événement "orientationchange" ou "resize" de la fenêtre :

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

Vous pouvez alors vérifier le window.orientation pour savoir dans quel sens le dispositif est orienté. Avec les téléphones Android, screen.width o screen.height se met également à jour lorsque l'appareil est tourné. (ce qui n'est pas le cas avec l'iPhone).

Answer 3

L'excellente réponse de l'idiot à deux balles fournit tout le contexte, mais permettez-moi de tenter une résumé concis et pragmatique de la manière de gérer les changements d'orientation sur iOS et Android :

• Si vous ne vous souciez que de dimensions des fenêtres (le scénario typique) - et non sur l'orientation spécifique :

  • Manipuler le resize événement uniquement.
  • Dans votre gestionnaire, agissez sur window.innerWidth y window.InnerHeight seulement.
  • Ne pas utiliser window.orientation - il ne sera pas à jour sur iOS.

• Si vous vous souciez vraiment de la orientation spécifique :

  • Poignée uniquement le site resize sur Android, et uniquement le site orientationchange sur iOS.
  • Dans votre gestionnaire, agissez sur window.orientation (y window.innerWidth y window.InnerHeight )

Ces approches offrent de légers avantages par rapport à la mémorisation de l'orientation précédente et à la comparaison :

• l'approche "dimensions seulement" fonctionne également lors du développement sur des navigateurs de bureau qui peuvent autrement simuler des appareils mobiles, par exemple Chrome 23. ( window.orientation n'est pas disponible sur les navigateurs de bureau).
• pas besoin d'une variable globale/anonyme de niveau fichier-fonction-enveloppe.

Answer 4

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

Answer 5

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.