Comment juger
Les appareils mobiles fournissent deux objets, un attribut et un événement:
(1) Window. L'orientation appartient à l'attribut précédent de l'objet Window; Il y a trois valeurs: 0 est portrait, 90 est inversé à gauche et se transforme en mode paysage, -90 est inversé à droite et se transforme en mode paysage, et le dernier 180 est de savoir si l'appareil est inversé en bas ou en vertical.
(2) OrientationChange est un événement qui déclenchera cet événement lorsque l'appareil tourne, tout comme l'événement de redimensionnement utilisé sur le PC.
Lorsque ces deux sont utilisés ensemble, il est facile d'obtenir l'état d'écran horizontal et vertical de l'appareil. Le code est le suivant:
(function () {var init = function () {var updateOrientation = function () {var orientation = window.orientation; switch (orientation) {case 90: case -90: orientation = 'paysage'; break; par défaut: orientation = 'portrait'; break;} // faire quelque chose // par exemple, ajouter un état à la balise html // alors affiche différentes taUS Document.BodyDans CSS, vous pouvez écrire de cette façon:
/ ** Performance Div La bordure montre le bleu ** /. Portrait Body Div {Border: 1Px Blue solide;} / ** Performance Div Border montre jaune ** /. Corps de paysage Div {Border: 1Px jaune solide;}Bien sûr, vous pouvez également utiliser les requêtes multimédias (recommandées):
@media all et (orientation: portrait) {body div {border: 1px bleu solide; }} @ media tout et (orientation: paysage) {body div {border: 1px jaune solide; }}compatibilité
Comment gérer la situation où Window. (Généralement l'un n'existe pas, l'autre n'existe pas, sinon)
Au début, le mode modèle de périphérique de Chrome est souvent utilisé, mais cette propriété n'existe pas, alors comment puis-je obtenir cette valeur? La méthode simple consiste à juger en fonction de la comparaison de la largeur et de la hauteur. Si la largeur est plus petite que la hauteur, c'est un écran vertical et que la largeur et la hauteur sont un écran horizontal.
Je sais comment obtenir le résultat. La prochaine chose est de savoir comment écouter les événements d'inversion des appareils. Étant donné que OrientationChange n'est pas disponible, utilisez l'événement de redimensionnement le plus basique ou utilisez la minuterie pour le détecter. Veuillez regarder le code:
(function () {var updateOrientation = function () {var orientation = (window.innerwidth> window.innerHeight)? 'paysage': 'portrait'; document.body.parentNode.setAttribute ('class', orientation);}; var init = function () {updateOriientation (); // vérifier chaque seconde // Window Resize Event Window.AdDeventListener (Resize ', UpdateORIENTATION, FAUX);};Enfin, la combinaison des deux méthodes ci-dessus est une solution de détection complète
(function () {var supportOrientation = (typeof window.orientation === 'nombre' && type window.onorientationchange === 'objet'); var init = function () {var htmlnode = document.body.parentNode, orientation; -90: orientation = «paysage»; Window.AddeventListener (OrientationChange ', mise à jour, false);} else {// Écoutez l'événement de résumé.Résumer
Utilisez l'événement OrientationChange pour surveiller si le périphérique tourne et utilisez la propriété Window.