So erzwingen Sie die vertikale Anzeige auf mobilen Seiten

Ich habe kürzlich bei der Arbeit eine mobile Seite geschrieben, die ursprünglich nichts Besonderes war, aber es gab eine Anforderung, die mir sehr seltsam vorkam und die ich noch nie zuvor gesehen hatte. Die von mir geschriebene Seite muss in einer App platziert werden, aber diese App ist im Querformat und die Webansicht, die diese Seite öffnet, ist ebenfalls im Querformat (die neueste Version der App ist beim Öffnen im Hochformat). Ursprünglich haben wir das REM-Layout verwendet und es gab im Querformat kein Problem, aber der Client hofft, die Seite beim Öffnen im Querformat im Hochformat anzeigen zu lassen. Es gibt also die folgende Reihe von Operationen.

Der erste Schritt besteht darin, den horizontalen Bildschirmstatus mithilfe des folgenden Codes zu bestimmen:

Funktion orient() {
            if(window.orientation == 90 || window.orientation == -90) {//horizontaler Bildschirm//iPad, iPhone vertikaler Bildschirm; Android horizontaler Bildschirm//$("body").attr("class", "landscape");
                //Ausrichtung = "Querformat";
                //alarm("iPad, iPhone vertikaler Bildschirm; Android horizontaler Bildschirm");
                $("p").text("horizontaler Bildschirm");
                gibt false zurück;
            } sonst wenn(window.orientation == 0 || window.orientation == 180) {//Vertikaler Bildschirm//iPad, horizontaler iPhone-Bildschirm; vertikaler Android-Bildschirm// $("body").attr("class", "portrait");
// Ausrichtung = „Hochformat“;
                //alarm("iPad, iPhone horizontaler Bildschirm; Android vertikaler Bildschirm");
                $("p").text("Vertikaler Bildschirm");
                gibt false zurück;
            }
        }
        //Aufruf, wenn die Seite geladen wird$(function() {
            Orient();
        });
        //Wird aufgerufen, wenn der Benutzer die Bildschirmausrichtung ändert$(window).on('orientationchange', function(e) {
            
            Orient();
            
        });

Dies dient zur Überwachung der Richtung des Telefons. Da die APP jedoch im Querformat geöffnet wird, kann dies nicht erkannt werden. Darüber hinaus ist Voraussetzung, dass am Telefon die automatische Drehung eingeschaltet ist. Daher wurde die obige Methode aufgegeben.

Da die intelligente Methode aufgegeben wurde, besteht die günstigste Methode darin, die Breite und Höhe des Bildschirms zu überwachen. Wenn die Höhe größer als die Breite ist, gehen wir davon aus, dass sich das Telefon im Hochformat befindet. Wenn die Breite größer als die Höhe ist, gehen wir davon aus, dass es sich im Querformat befindet. (Natürlich ist dies auch mit Einschränkungen verbunden, aber da das Problem der horizontalen und vertikalen Bildschirme in der neuen App gelöst wurde, werden wir es hier so machen.) Wenn sich der Bildschirm im Hochformat befindet, müssen wir nichts tun. Im Querformat müssen wir die Seite jedoch um 90 Grad drehen. Schauen wir uns ohne weitere Umschweife den Code an:

// Verwenden Sie CSS3-Rotation, um den Stammcontainer um 90 Grad gegen den Uhrzeigersinn zu drehen und den Benutzer zu zwingen, den Bildschirm vertikal anzuzeigen. var detectOrient = function() {
    var Breite = Dokument.Dokumentelement.Clientbreite,
        Höhe = Dokument.Dokumentelement.Clienthöhe,
        //$wrapper = document.getElementsByTagName("body")[0],
        $wrapper = document.getElementById("vue"),
        Stil = "";
    if(width <= height) { // Horizontaler Bildschirm// style += "width:" + width + "px;"; // Beachten Sie die Umschaltung von Breite und Höhe nach der Drehung// style += "height:" + height + "px;";
// Stil += "-webkit-transform: drehen(0); transform: drehen(0);";
// Stil += "-webkit-transform-origin: 0 0;";
// Stil += "Transform-Origin: 0 0;";
        Stil + = "Schriftgröße:" + (Breite * 100 / 1125) + "px";
        var html_doc = document.getElementsByTagName("html")[0];
        html_doc.style.cssText = "Schriftgröße:" + (Breite * 100 / 1125) + "px";
    } sonst { // vertikaler Bildschirmstil += "Breite:" + Höhe + "px;";
        Stil + = "Mindesthöhe:" + Breite + "px;";
        Stil += "-webkit-transform: drehen(-90 Grad); transform: drehen(-90 Grad);";
        // Achten Sie auf die Verarbeitung des Mittelpunkts der Rotation style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
        Stil + = "Transform-Origin:" + Höhe / 2 + "px" + (Höhe / 2) + "px;";
        //Stil += "Schriftgröße:" + Höhe * 100 / 1125 + "px;";
        //$("html").css({"Schriftgröße":(Höhe * 100 / 1125),"overflow-y":"versteckt"});
        var html_doc = document.getElementsByTagName("html")[0];
        html_doc.style.cssText = "Schriftgröße:" + Höhe * 100 / 1125 + "px;" + "Überlauf-y:"+"versteckt;"+"Höhe:"+Höhe+"px;";
        Stil += "Überlauf-y: versteckt;"
        Fügt eine Tabulatortaste hinzu.
        $wrapper.style.cssText = Stil;
    }
    
    
}
window.onresize = Orientierung erkennen;
Orient erkennen();

Funktion add_tab(){
    var clone_tab = $("footer").clone();
    $("Fußzeile").entfernen();
    clone_tab.css({"transform":"drehen(-90 Grad)","transform-origin":"oben rechts"})
    $("body").anhängen(clone_tab);
    clone_tab.css({"Position":"fest","rechts":"1,77rem","unten":"4rem","links":"auto","oben":"0","Breite":"11,25rem","Höhe":"1,77rem"})
}

Ich glaube, dass dieser Code für Front-End-Mitarbeiter nicht sehr schwierig ist, aber es gibt drei Punkte, die beachtet werden müssen.

Erster Punkt:

Zu Beginn habe ich der Einfachheit halber das gesamte HTML gedreht. Dabei trat jedoch ein Problem auf. Die Positionierung der festen Elemente auf der Seite war nicht mehr effektiv (der <footer> im Code wird als Tabulatorschalter unten platziert). Dies müssen wir ändern. Da das Drehen des übergeordneten Elements für die untergeordneten Elemente nicht funktioniert, sollten wir das übergeordnete Element nicht drehen, sondern direkt seine Geschwisterelemente. Hier rotiere ich ein Element namens #vue, weil sich alle anderen Inhalte meiner Seite in diesem Div befinden. Also habe ich dieses Element gedreht. Dann kann die Positionierung zu diesem Zeitpunkt verwendet werden, aber der Stil ist falsch. Daher passe ich in meiner Funktion add_tab die Größe und den Stil dieses Elements so an, dass es normalerweise auf der rechten Seite des Bildschirms angezeigt werden kann, d. h. am unteren Bildschirmrand im Hochformat.

Zweiter Punkt:

Der zweite zu beachtende Punkt ist, dass ich, da ich das REM-Layout verwende, normalerweise die Schriftgröße von HTML ändere. Aber seien Sie diesmal vorsichtig. Wenn wir es drehen, wird die Breite zur Höhe und die Höhe zur Breite. Daher müssen wir die Höhe verwenden, um die Schriftgröße des Stammverzeichnisses zu berechnen.

Dritter Punkt:

Der dritte Punkt wird im Programm notiert, was erfordert, dass wir auf den Rotationspunkt achten. Der Standardrotationspunkt ist der Mittelpunkt des ausgewählten Elements. Meistens möchten wir den Rotationszentrumspunkt ändern. Nach der Rotation müssen Sie auch das HTML-Overflow-y: hidden festlegen. Andernfalls kommt es zu unnötigem Scrollen.

Dadurch wird grundsätzlich die gesamte Seite gedreht und das fest positionierte Element am unteren Ende erfolgreich neu positioniert. Glücklicherweise war das von uns verwendete Popup-Fenster das Layui-Popup-Fenster und wir mussten es nur um 90 Grad drehen.

PS: Schließlich habe ich ein Problem gefunden, das nicht gelöst werden kann. Wenn die Seite lang genug ist, d. h. wenn eine Bildlaufleiste vorhanden ist, und nachdem das Popup-Fenster angezeigt wird, die Maskenebene dahinter verschoben wird, wird die Seite dahinter nach oben verschoben. Dieses Problem kann gelöst werden. Der obige Artikel verwendet zur Lösung eine feste Positionierung, aber aufgrund der Drehung wird dieses Problem ungültig, sodass es keine bessere Lösung gibt. Im Hochformat ist es ok.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.