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 à l'aide de JavaScript

Bien que la détection de l'orientation de l'écran et des modifications dans Safari sur les iPhones à l'aide de JavaScript soit possible, est-ce également réalisable sur les téléphones Android ?

Détection de rotation réactive sur Android

Dans les téléphones Android, la détection de rotation à l'aide de JavaScript est une question complexe en raison des comportements variables selon les appareils et les navigateurs. Se fier uniquement aux événements de redimensionnement ou de changement d'orientation n'est pas fiable.

Approche fiable

L'approche recommandée implique de surveiller à la fois les événements de redimensionnement et de changement d'orientation, en vérifiant systématiquement les mises à jour d'orientation à travers des intervalles d'interrogation. .

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

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

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);</code>

Comportement spécifique à l'appareil

Les réponses de l'appareil aux changements d'orientation varient considérablement. Voici un tableau du séquencement des événements et des valeurs obtenues en testant quatre appareils différents :

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

Conclusion

Bien que la gestion des événements pour les changements d'orientation puisse différer entre les appareils iOS et Android, l'utilisation de l'approche recommandée garantit une détection fiable de l'orientation sur les téléphones Android à l'aide de JavaScript.

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!