Verwenden Sie die Medien, um das Problem zu bestimmen, das in der Bildschirmbreite auftritt:
Auf iOS kann ich es tun, wenn ich den Bildschirm drehe, aber es antwortete nicht auf Android. Der horizontale Bildschirm zeigt immer noch meinen vertikalen Bildschirmstil.
Nachdem Sie die Informationen überprüft haben, müssen Sie diesen Code dem Header der Seite hinzufügen, wenn die Medien von CSS3 einen besseren Display -Effekt auf der mobilen Seite haben möchten.
<meta name = "viewPort" content = "width = Gerätebreite, initiale scale = 1,0, maximal scale = 1.0, user-scalable = no">
Aber ich kann diesen Code nicht verwenden. Weil meine Seite angepasst ist. Die Schriftgröße und die Stilgröße können gemäß der Größe des Bildschirms angezeigt werden. Wenn ich diesen Code hinzufüge, funktioniert meine Anpassung nicht. Verwenden Sie also andere Methoden
Lösung:
Das mobile Gerät bietet ein Ereignis: OrientationChange -Ereignis
Diese Veranstaltung wurde von Apple für Safari hinzugefügt. Damit Entwickler bestimmen können, wann der Benutzer das Gerät von der Landschaftsansicht auf den Porträtansichtsmodus wechselt.
Dieses Ereignis wird ausgelöst, wenn sich das Gerät dreht.
// auf Orientierungsanhörungen ändert window.addeventListener ("orientationChange", function () {// Die neue Orientierungsnummer (window.orientation);}, false);Solange der Benutzer den Betrachtungsmodus des Geräts ändert, wird das Orientierungsereignis ausgelöst. Das Ereignisobjekt enthält derzeit keine wertvollen Informationen.
Da die einzigen relevanten Informationen über window.orientation zugegriffen werden können
Orientierungsattribut
Es hat drei Werte: 0,90, -90
0 ist Porträt, -90 bedeutet, dass das Gerät horizontal in den Landschaftsmodus rechts dreht, während 90 bedeutet, dass das Gerät links horizontal in den Landschaftsmodus dreht.
Es gibt eine andere, die 180 ist, was den vertikalen Bildschirm bedeutet, aber ein umgedrehter vertikaler Bildschirmmodus ist. Dieses Modell wurde jedoch noch nicht unterstützt.
Wie in der Abbildung gezeigt:
Daher ist die Kombination dieses Ereignisses für das Orientierung und die Orientierungseigenschaft des Fensters für uns einfacher zu bestimmen, ob sich das Gerät in einem horizontalen oder vertikalen Bildschirm befindet.
(function () {var init = function () {var updateorientation = function () {var orientation = window.orientation; switch (orientation) {case 90: case -90: orientation = 'landscape'; // Hier ist horizontaler Break; Standard: Orientierung = 'Porträt'; // Hier ist addical break; vertikaler Bildschirm //plusportDocument updateorientation ();}; window.adDeVentListener ('domcontentLoded', init, false);}) ();Daher kann die Klasse nach verschiedenen Rotationszuständen hinzugefügt werden, sodass unser CSS so geschrieben werden kann
/** Performance -Körper zeigt rot **/. Porträtkörper div {Hintergrund: rot;}/** Handbreite zeigt blau **/.Eine andere Möglichkeit zum Schreiben ist die Verwendung von Medienfragen
@media alle und (Orientierung: Porträt) {Body Div {Hintergrund: rot;}} @media alle und (Orientierung: Landschaft) {Body Div {Hintergrund: Blau; }}Diese Ausrichtung Medienabfrage funktioniert auf iOS3.2+ und Android 2.0+.
Relativ gesehen ist diese Art von Code etwas prägnanter. Mit den oben genannten JS+CSS ist diese Art von Code reines CSS. Wenn sich das Gerät dreht, werden die CSS, die die Richtung ändern, gemäß der Richtung des Geräts gedreht.
Kompatibilität
Einige Geräte bieten kein Orientierungsereignis an, lösen jedoch nicht das Ereignis der Größe des Fensters aus. Und wenn Medienfragen sie nicht unterstützen, was sollen wir dann tun?
Es kann anhand der Größenvereinbarung beurteilt werden. Verwenden Sie die Innenbreite und die Innerheight, um die Bildschirmgröße abzurufen. Nach dem Vergleich von Breite und Höhe, Breite und Höhe zu urteilen, sind vertikale Bildschirme, Breite und Höhe sind horizontale Bildschirme.
Der Code ist wie folgt:
(function () {var updateorientation = function () {var orientation = (window.innnerwidth> window.innerHeight)? 'Landscape': 'Porträt'; document.body.parentnode.setAttribute ('class', Orientierung);}; var init = function () {{) updattribute (); // // auf den Ereignis ressize ressize hör auf ressize event zu ressize -event hör zu ressize -evelsiatation (). window.adDeVentListener ('Größe', updateorientation, false);}; window.adDeVentListener ('domcontentled', init, false);}) ();Auf diese Weise können wir die Stiländerungen sehen, die durch die Bildschirmrotation im Browser mitgebracht werden.
Die Kombination der beiden Erkennungsmethoden ist wie folgt:
(function () {var Supportorientation = (Typeof window.orientation === 'number' && typeof window.onorientationChange === 'Objekt'); var init = function () {var htmlnode = document.body.body.Parentnode, Orientierung; -90: orientation = 'Landscape'; Break; Standard: Orientierung = 'Porträt'; Break;}} else {Orientierung = (Fenster. 'Porträt';} htmlnode.setAttribute ('Klasse', Orientierung);}; if (Supportorientation) {window.addeventListener ('orientationChange', updateorientation, false);} else {// Hören Sie sich das Ereignis zur Größe des Größens an window.adDeVentListener ('Größe', updateorientation, false);} updateorientation ();}; window.adDeVentListener ('domcontentled', init, false);}) ();Mit dieser Methode können Sie die nervige horizontale und vertikale Bildschirmerkennung von mobilen Geräten lösen.