Wie man beurteilt
Mobile Geräte bieten zwei Objekte, ein Attribut und ein Ereignis:
(1) Fenster.orientierung gehört zum vorherigen Attribut des Fensterobjekts; Es gibt drei Werte: 0 ist Porträt, 90 ist nach links umgekehrt und wendet sich in den Landschaftsmodus, -90 nach rechts um und wendet sich dem Landschaftsmodus um, und die letzte 180 ist, ob das Gerät nach unten oder vertikal ist.
.
Wenn diese beiden zusammen verwendet werden, ist es einfach, den horizontalen und vertikalen Bildschirmstatus des Geräts zu erhalten. Der Code ist wie folgt:
(function () {var init = function () {var updateorientation = function () {var orientation = window.orientation; switch (orientation) {case 90: case -90: orientation = 'landscape'; break; default: orientation = 'porträt'; Dokument.ParentNode.Setattribute ('Klasse', Orientierung);In CSS können Sie so schreiben:
/** Performance Div Border zeigt blau **/. Porträtkörper div {Rand: 1px solide blau;}/** Performance Div Rand zeigt gelb **/.Natürlich können Sie auch Medienabfragen verwenden (empfohlen):
@media alle und (Orientierung: Porträt) {Body Div {Border: 1px Solid Blue; }}@media alle und (Orientierung: Landschaft) {Body Div {Border: 1px Solid Yellow; }}Kompatibilität
Wie kann man mit der Situation umgehen, in der es im Gerät nicht gibt. (Im Allgemeinen existiert einer nicht, der andere existiert nicht, sonst)
In der frühen Entwicklung wird der Chrome -Gerätemodellmodus häufig verwendet, aber diese Eigenschaft gibt es nicht. Wie kann ich diesen Wert erhalten? Die einfache Methode besteht darin, anhand des Vergleichs von Breite und Höhe zu urteilen. Wenn die Breite kleiner als die Höhe ist, ist es ein vertikaler Bildschirm und die Breite und Höhe sind ein horizontaler Bildschirm.
Ich weiß, wie man das Ergebnis erzielt. Das nächste ist, wie man auf Umkehrereignisse der Geräte anhört. Da OrientationChange nicht verfügbar ist, verwenden Sie das grundlegendste Größenereignis oder verwenden Sie Timer, um es zu erkennen. Bitte schauen Sie sich den Code an:
(function () {var updateorientation = function () {var orientation = (window.innnerwidth> window.innerHeight)? 'Landscape': 'Porträt'; document.body.Parentnode.SetatTribute ('Klasse', Orientierung);}; var init = function () {Updateorientation (); Ereignisfenster.AdDeVentListener ('Größe', Updateorientierung, Falsch);Schließlich ist die Kombination der oben genannten zwei Methoden eine vollständige Erkennungslösung
(function () {var Supportorientation = (Typeof window.orientation === 'number' && typeof window.onorientationChange === 'Objekt'); var init = function () {var htmlnode = document.body.body.Parentnode, Orientierung; -90: Orientierung = 'Landschaft'; windel.adDeventListener ('OrientierungSchange', Updateorientierung, false)} else {// das Ereignisfenster anhören.Zusammenfassen
Verwenden Sie das OrientationChange -Ereignis, um zu überwachen, ob sich das Gerät dreht, und verwenden Sie die Eigenschaft für Fenster.