JS und CSS implementieren die Erkennung von Änderungen in der Ausrichtung mobiler Geräte und die Beurteilung horizontaler und vertikaler Bildschirme. Javascript-Fähigkeiten

Methode 1: Verwenden Sie ein Ereignis, um den Wechsel zwischen dem horizontalen und vertikalen Bildschirm des Telefons auszulösen

Code kopieren Der Code lautet wie folgt:

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

// Kündigen Sie den Wert der neuen Richtung an

alert(window.orientation);

}, false);

Methode 2: Größenänderungen überwachen

Code kopieren Der Code lautet wie folgt:

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

// Bildschirmgröße abrufen (innere/äußere Breite, innere/äußere Höhe)

}, false);

CSS bestimmt, ob der Bildschirm horizontal oder vertikal ist

Code kopieren Der Code lautet wie folgt:

/* Porträt */

@media-Bildschirm und (Ausrichtung:Hochformat) {

/* porträtspezifische Stile */

}

/* Querformat */

@media-Bildschirm und (Ausrichtung:Querformat) {

/* landschaftsspezifische Stile */

}

Die native Methode window.matchMedia ermöglicht Medienabfragen in Echtzeit. Über die obige Medienabfrage können wir herausfinden, ob wir uns in einer aufrechten oder horizontalen Ansicht befinden:

Code kopieren Der Code lautet wie folgt:

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

// Wenn es eine Übereinstimmung gibt, befinden wir uns in der vertikalen Ansicht

if(mql.matches) {

//aufrechte Richtung

alert("1")

} sonst {

//Horizontale Richtung

alert("2")

}

//Hinzufügen eines Medienabfrage-Änderungs-Listeners

mql.addListener(function(m) {

if(m.matches) {

//Wechsel zur aufrechten Ausrichtung

document.getElementById("test").innerHTML="In aufrechte Ausrichtung wechseln";

}

sonst {

document.getElementById("test").innerHTML="In horizontale Ausrichtung ändern";

//Wechsel zur horizontalen Ausrichtung

}

});