Comment détecter de manière fiable la rotation d'un téléphone Android dans les navigateurs à l'aide de JavaScript ?

Détection de la rotation des téléphones Android dans les navigateurs avec JavaScript

Dans les navigateurs iOS, les développeurs peuvent détecter la rotation de l'écran à l'aide de l'événement onorientationchange et en interrogeant window.orientation pour l'angle. Des fonctionnalités similaires peuvent-elles être obtenues sur les smartphones Android ?

Comportement du navigateur sur Android

Contrairement à iOS, le comportement des événements de rotation d'écran sur Android varie selon les appareils. Les événements resize et orientationChange peuvent se déclencher dans différentes séquences et fréquences. De plus, des valeurs telles que screen.width et window.orientation peuvent se comporter de manière incohérente. S'appuyer uniquement sur screen.width est particulièrement peu fiable car il ne change pas lors de la rotation dans iOS.

Approche fiable

Pour résoudre ces incohérences, il est recommandé d'écouter les événements resize et orientationChange, combinés à des interrogations intermittentes. Cela garantit la capture de valeurs d'orientation valides, même dans des scénarios où les événements ne se déclenchent pas de manière cohérente.

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

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

// Polling as a safety catch for 180-degree rotations
setInterval(checkOrientation, 2000);

Résultats des tests

Les tests sur divers appareils Android ont révélé des variations significatives :

Device	Events Fired	Orientation	InnerWidth	Screen.width
iPad 2 (Landscape)	Resize OrientationChange	90	1024	768
iPad 2 (Portrait)	Resize OrientationChange	0	768	768
iPhone 4 (Landscape)	Resize OrientationChange	90	480	320
iPhone 4 (Portrait)	Resize OrientationChange	0	320	320
Droid Phone (Landscape)	OrientationChange Resize	90	320	320
Droid Phone (Portrait)	OrientationChange Resize	0	569	569
Samsung Galaxy Tablet (Landscape)	OrientationChange OrientationChange OrientationChange Resize	90	400	400
Samsung Galaxy Tablet (Portrait)	OrientationChange OrientationChange OrientationChange Resize	0	683	683

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!