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!