Kürzlich habe ich bei der Arbeit eine mobile Seite geschrieben, aber es gab eine Anforderung, die mir noch nie begegnet war. Die von mir geschriebene Seite musste in einer APP platziert werden Querformat, die Webansicht, die diese Seite öffnet, befindet sich ebenfalls in der horizontalen Bildschirmansicht (die neueste Version der APP wird in der vertikalen Bildschirmansicht geöffnet). Ursprünglich haben wir das REM-Layout verwendet, und im horizontalen Bildschirmzustand gibt es kein Problem, aber Partei A hofft, den horizontalen Bildschirm im horizontalen Bildschirm verwenden zu können. Erzwingen Sie die vertikale Anzeige dieser Seite, wenn der Bildschirm geöffnet ist. Es gibt also die folgende Reihe von Operationen.
Die erste besteht darin, den Status des horizontalen Bildschirms mithilfe des folgenden Codes zu ermitteln:
function orient() { if(window.orientation == 90 || window.orientation == -90) {//horizontal screen//ipad, iphone vertikaler Bildschirm//$(body).attr(class, //orientation = 'querformat'; //alert(ipad, iphone Vertical screen); $(p).text(horizontal screen); == 0 ||. window.orientation == 180) {//Vertikaler Bildschirm//iPad, horizontaler iPhone-Bildschirm// $(body).attr(class,portrait);//orientierung = 'portrait'; //alert(ipad, iphone horizontal screen; Andriod Vertical screen); $(p).text(vertikal screen); //Wird aufgerufen, wenn die Seite geladen wird $(function() { orient(); }); //Wird aufgerufen, wenn der Benutzer die Bildschirmausrichtung ändert $(window).on('orientationchange', function(e) { orient(); });Dabei wird die Richtung des Mobiltelefons überwacht. Da die APP jedoch horizontal geöffnet wird, ist dies in der Regel nicht erkennbar. Voraussetzung hierfür ist, dass die automatische Drehung des Telefons aktiviert ist. Daher wurde die obige Methode aufgegeben.
Da die intelligente Methode aufgegeben wurde, besteht die kostengünstigste Methode darin, die Breite und Höhe des Bildschirms zu überwachen. Wenn die Höhe größer als die Breite ist, gehen wir standardmäßig davon aus, dass sich das Telefon im vertikalen Bildschirmzustand befindet. (Natürlich hat dies auch Einschränkungen, aber da die neue APP das Problem der horizontalen und vertikalen Bildschirme gelöst hat, werden wir es hier einfach tun.) Wenn sich der Bildschirm im Hochformat befindet, müssen wir nichts tun. Aber im Querformat müssen wir die Seite um 90 Grad drehen. Schauen wir uns ohne weitere Umschweife direkt den Code an:
//Verwenden Sie die CSS3-Rotation, um den Stammcontainer um 90 Grad gegen den Uhrzeigersinn zu drehen, um den Benutzer zu zwingen, ihn vertikal anzuzeigen. var detectorOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document. getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style = ; height) { // Horizontaler Bildschirm // style += width: + width + px;; // Achten Sie auf den Wechsel von Breite und Höhe nach der Drehung // style += height: + height + px;;// style += -webkit- transform: rotieren(0);// style += -webkit-transform-origin: 0 0;;// style += transform-origin: 0 0;; Schriftgröße: + (Breite * 100 / 1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = Schriftgröße: + (width * 100 / 1125) + px; } else { // Vertikaler Stil + = Breite: + Höhe + px;; Stil += Mindesthöhe: + Breite + px;; -webkit-transform: rotieren(-90deg); transform: rotieren(-90deg); // Achten Sie auf die Handhabung des Rotationsmittelpunktstils += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; style += transform-origin: + height / 2 + px + (height / 2) + px;; 1125 + px;; //$(html).css({font-size:(height * 100 / 1125),overflow-y:hidden}); var html_doc = document.getElementsByTagName(html)[0]; style.cssText = Schriftgröße: + Höhe * 100 / 1125 + px; overflow-y:+hidden;+height:+height+px;; style += overflow-y: hide;; add_tab(); ;function add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left :auto,top:0,width:11.25rem,height:1.77rem})}Ich glaube, dass dieser Code für Front-End-Mitarbeiter nicht schwierig ist, aber es gibt drei Punkte, die beachtet werden müssen.
Erster Punkt:
Zu Beginn habe ich der Einfachheit halber den gesamten HTML-Code direkt gedreht. Zu diesem Zeitpunkt tritt ein Problem auf, das heißt, die Positionierung fest positionierter Elemente auf der Seite funktioniert nicht (die <Fußzeile> im Code wird als platziert). Tab-Schalter. unten); Da das Drehen des übergeordneten Elements bei den untergeordneten Elementen nicht funktioniert, müssen wir das übergeordnete Element nicht drehen, sondern nur seine Geschwisterelemente. Hier rotiere ich ein Element namens #vue, da sich alle anderen Inhalte auf meiner Seite in diesem Div befinden. Also habe ich das Element einfach gedreht. Dann kann zu diesem Zeitpunkt die Positionierung verwendet werden, aber der Stil ist falsch. Daher passe ich in meiner Funktion add_tab die Größe und den Stil dieses Elements an, sodass es normal auf der rechten Seite des Bildschirms, also im Hochformat, angezeigt werden kann Modus. , am unteren Bildschirmrand.
Zweiter Punkt:
Das zweite, was zu beachten ist, ist, dass ich die Schriftgröße des HTML-Codes ändern werde, da ich das REM-Layout verwende. Seien Sie jedoch vorsichtig. Wenn wir es drehen, wird die Breite zur Höhe und die Höhe zur Breite Sie müssen die Höhe verwenden, um die Schriftgröße des Stammverzeichnisses zu berechnen.
Der dritte Punkt:
Der dritte Punkt wird im Programm vermerkt. Wir müssen auf den Drehpunkt achten. Der Standarddrehpunkt ist der Mittelpunkt des ausgewählten Elements. Jetzt wollen wir den Mittelpunkt der Drehung ändern. Nach der Rotation müssen Sie auch den HTML-Code overflow-y:hidden ausführen. Ansonsten kommt es zu unnötigem Scrollen.
In diesem Fall wird grundsätzlich die gesamte Seite gedreht und die fest positionierten Elemente unten werden erneut erfolgreich positioniert. Glücklicherweise ist das Popup-Fenster, das wir verwenden, das Popup-Fenster von Laui, und dann können wir das Popup-Fenster um 90 Grad drehen.
ps: Schließlich habe ich ein Problem gefunden, das nicht gelöst werden kann, wenn die Seite lang genug ist, das heißt, wenn es eine Bildlaufleiste gibt, nachdem das Popup-Fenster herausgekommen ist und Sie die Maskenebene dahinter geschoben haben Seiten werden nach oben verschoben. Dies hätte ursprünglich durch die Verwendung einer festen Positionierung gelöst werden können, aber aufgrund der Drehung ist dies fehlgeschlagen, sodass es keinen guten Weg gibt. Im Porträtmodus gibt es kein Problem.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.