JS et CSS implémentent la détection des changements d'orientation des appareils mobiles et le jugement des compétences d'écrans horizontaux et verticaux_javascript

Méthode 1 : Utiliser un événement pour déclencher le basculement entre les écrans horizontaux et verticaux du téléphone

Copier le code Le code est le suivant :

window.addEventListener("orientationchange", function() {

// Annoncer la valeur de la nouvelle direction

alerte(window.orientation);

}, faux);

Méthode 2 : surveiller les modifications de redimensionnement

Copier le code Le code est le suivant :

window.addEventListener("resize", function() {

// Obtenir la taille de l'écran (largeur intérieure/extérieure, hauteur intérieure/extérieure)

}, faux);

css détermine si l'écran est horizontal ou vertical

Copier le code Le code est le suivant :

/* portrait */

@media screen et (orientation:portrait) {

/* styles spécifiques aux portraits */

}

/*paysage*/

@media screen et (orientation:paysage) {

/* styles spécifiques au paysage */

}

La méthode native window.matchMedia permet d'interroger les médias en temps réel. Nous pouvons utiliser la requête média ci-dessus pour savoir si nous sommes en vue verticale ou horizontale :

Copier le code Le code est le suivant :

var mql = window.matchMedia("(orientation : portrait)");

// S'il y a correspondance, on est en vue verticale

if(mql.matches) {

//direction verticale

alerte("1")

} autre {

//Direction horizontale

alerte("2")

}

//Ajouter un écouteur de changement de requête multimédia

mql.addListener(function(m) {

si(m.matches) {

//Changement en orientation verticale

document.getElementById("test").innerHTML="Changement en orientation verticale";

}

autre {

document.getElementById("test").innerHTML="Changement en orientation horizontale";

//Changement en orientation horizontale

}

});