JavaScript peut-il détecter la rotation des téléphones Android dans les navigateurs ?

Détection basée sur Javascript de la rotation des téléphones Android dans les navigateurs

Dans les navigateurs Safari développés par Apple, il est possible de surveiller les changements d'orientation de l'écran en observant l'événement orientationChange et en évaluant la fenêtre .orientation. Cependant, une telle fonctionnalité peut-elle être implémentée dans les navigateurs fonctionnant sur des appareils Android ?

La réponse à cette question est nuancée. L'exécution de Javascript sur des pages Web standards peut en effet détecter la rotation de l'écran sur les appareils Android. Cependant, le comportement varie selon les appareils et les navigateurs.

Défis et approche recommandée

Le principal défi réside dans le comportement de déclenchement d'événements incohérent sur les appareils Android. Les événements resize et orientationChange peuvent se déclencher de manière asynchrone avec des fréquences variables. Pour ajouter à cette complexité, des valeurs telles que screen.width et window.orientation ne fournissent pas toujours des résultats prévisibles. Par conséquent, il n'est pas recommandé de s'appuyer uniquement sur screen.width car il reste inchangé pendant les rotations iOS.

L'approche la plus fiable consiste à écouter simultanément les événements de redimensionnement et d'orientationChange. Compléter cela par des interrogations périodiques à l'aide de la fonction setInterval améliore la fiabilité, garantissant une valeur d'orientation valide.

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Perform operations in response to orientation change
    }
};

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

// Android occasionally fails to trigger events for 180-degree rotations
setInterval(checkOrientation, 2000);</code>

Résultats spécifiques à l'appareil

Voici un résumé des comportements observés à travers divers appareils testés :

Device	Event Sequence	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, orientationchange	90	400	400
Samsung Galaxy Tablet (Portrait)	orientationchange, orientationchange, orientationchange, resize, orientationchange	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!