Comment puis-je détecter de manière fiable la rotation des appareils dans un navigateur sur Android avec JavaScript ?

Détecter la rotation de l'appareil dans le navigateur sur Android avec JavaScript

Défis de compatibilité dans la détection de la rotation

Détection de la rotation de l'appareil à l'aide de JavaScript dans le navigateur peut être plus difficile sur les téléphones Android que sur les iPhones, qui ont une approche bien définie. Le comportement sur les appareils Android peut être incohérent, avec des variations dans la séquence et la fréquence des événements et des changements de valeurs telles que screen.width et window.orientation.

Approche fiable pour la détection de rotation

Pour résoudre ces incohérences, il est recommandé d'écouter à la fois les événements resize et orientationChange et de mettre en œuvre un sondage par mesure de sécurité. Cette approche garantit que vous recevrez éventuellement une valeur d'orientation valide.

<code class="js">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

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

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);</code>

Séquences d'événements et changements de valeur

La séquence d'événements et les changements de valeurs varient selon appareils. Voici un tableau résumant les résultats de divers appareils :

Device	Events Fired (to Landscape)	orientation	innerWidth	screen.width
iPad 2	resize, orientationchange	90	1024	768
iPhone 4	resize, orientationchange	90	480	320
Droid phone	orientationchange, resize	90	320	569
Samsung Galaxy Tablet	orientationchange, orientationchange, orientationchange, resize, orientationchange	90, 90, 90	400	683

Considérations supplémentaires

Bien que cette approche fournisse un moyen fiable de détecter la rotation de l'appareil, il est important de garder en gardant à l'esprit les limites de JavaScript dans ce contexte. Par exemple, certaines valeurs telles que screen.width peuvent ne pas toujours changer comme prévu. Il est également recommandé d'éviter de se fier uniquement à screen.width en raison de son comportement incohérent sur les appareils iOS.

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!