JavaScript peut-il détecter de manière fiable la rotation d'un téléphone Android dans un navigateur ?

JavaScript peut-il détecter la rotation des appareils Android dans le navigateur ?

Détection de l'orientation de l'écran dans les navigateurs

Dans Safari sur iPhone, l'écran les changements d’orientation peuvent être détectés via l’événement onorientationchange. Cependant, la question se pose : les téléphones Android peuvent-ils offrir des capacités de détection d'orientation similaires ?

JavaScript et rotation des téléphones Android

Le comportement de la détection d'orientation sur les appareils Android varie considérablement. Les événements resize et orientationChange peuvent se déclencher dans des séquences différentes avec une fréquence incohérente. De plus, les valeurs telles que screen.width et window.orientation ne sont pas toujours mises à jour comme prévu.

Approche fiable pour détecter la rotation

Pour garantir la fiabilité, il est recommandé de s'abonner à les événements resize et orientationChange. De plus, un mécanisme d'interrogation peut être mis en œuvre pour capturer les événements manqués :

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, take appropriate actions
    }
};

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

// (optional) Android may fail to fire events on 180 degree rotations
setInterval(checkOrientation, 2000);</code>

Résultats spécifiques aux appareils

Les tests sur divers appareils ont révélé des incohérences. Alors que les appareils iOS présentent un comportement cohérent, les appareils Android présentent des variations. Le tableau ci-dessous résume les résultats observés :

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

Par conséquent, bien que la détection de la rotation des téléphones Android avec JavaScript dans les navigateurs soit possible, le comportement varie selon les appareils et nécessite une approche robuste pour garantir la fiabilité.

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!