Vor nicht allzu langer Zeit habe ich ein H5 -Projekt durchgeführt und musste eine Verarbeitung durchführen, wenn sich der horizontale und vertikale Bildschirm ändert. Es besteht kein Zweifel, dass der Orientierungsprogramm verwendet werden muss, um Änderungen der horizontalen und vertikalen Bildschirme zu überwachen.
Plan 1:
// Hören Sie sich die Orientierungsänderungen an.
Nachdem der Code hinzugefügt wurde, gibt es verschiedene Kompatibilitätsprobleme. Kompatibilitätsprobleme treten hier an zwei Stellen auf:
OrientationChange
event.orientation | screen.orientation.angle
Das Folgende ist die Kompatibilität des OrientationChange -Ereignisses:
Das Folgende ist die Kompatibilität von Screen.orientierung:
Plan 2:Der obige Plan funktioniert nicht, sodass Sie nur andere Methoden durchführen können. Google und erfahren, dass es durch die Größe der Größe erreicht werden kann (Fenster.inner/äußere Breite, Fenster.inner/Außenhöhe):
window.adDeVentListener ("Größe", Funktion (Ereignis) {var orientation = (window.innnerwidth> window.innnerHeight)? "Landscape": "Porträt"; if (oritentation === 'Porträt') {// etwas tun ...} {// etwas anderes tun ...}}, falsch);Diese Lösung erfüllt im Grunde die Bedürfnisse der meisten Projekte, aber es gibt immer noch einige Mängel:
Solange sich die Größe des Fensters ändert, wird das Ereignis der Größe kontinuierlich ausgelöst. Sie können SetTimeout verwenden, um zu optimieren
Wenn es mehrere Orte gibt, an denen horizontale und vertikale Bildschirme überwacht werden müssen, müssen Sie mehrere Windows.AdDeVentListener ("Größe", Funktion (Ereignis) {...}) registrieren. Können Sie es durch die Abonnement- und Veröffentlichungsmodi verbessern? Registrieren Sie nur eine Änderung, um Änderungen in horizontalen und vertikalen Bildschirmen zu überwachen und Benachrichtigungen zum abonnierten Objekt zu veröffentlichen, solange die horizontalen und vertikalen Änderungen auftreten. Andere Orte, die horizontale und vertikale Bildschirme überwachen müssen, sind nur ein Abonnement.
Der Schlüsselcode lautet wie folgt:
var resizecb = function () {if (win.innnerwidth> win.innnerHeight) {// Initialisieren Sie das Urteil meta.init = 'Landscape'; meta.current = 'Landscape'; } else {meta.init = 'Porträt'; meta.current = 'Porträt'; } return function () {if (win.innnerwidth> win.innerHeight) {if (meta.current! == 'Landscape') {meta.current = 'Landscape'; event.trigger ('__ orientationChange__', meta); }} else {if (meta.current! == 'porträt') {meta.current = 'Porträt'; event.trigger ('__ orientationChange__', meta); }}}}}}} ();Der vollständige Code wird hier angeklickt
Plan 3:
Ich persönlich denke jedoch, dass die Implementierung von Fenster. Kann die Erkennung durch einen Browser erreicht werden? Dies basiert auf CSS3@Media Media Query.
Wie folgt @Media -Kompatibilität:
Wie in der obigen Abbildung gezeigt, unterstützen mobile Browser CSS3 -Medien.
Implementierungsideen:
Erstellen Sie einen bestimmten CSS -Stil, der den Status des horizontalen und vertikalen Bildschirms identifiziert
Injizieren Sie den CSS -Code über JS in Seiten
Die Rückruffunktion der Größe der Größe erhält den Status des horizontalen und vertikalen Bildschirms
Hier wähle ich die Knoten-Schriftfamilie von <html> </html> als Erkennungsstilattribut aus. Die Gründe sind wie folgt:
Wählen Sie <html> </html> hauptsächlich, um Reflow zu vermeiden und neu zu streichen
Der Schriftfamiliestil ist hauptsächlich darauf zurückzuführen, dass die Schriftfamilie die folgenden Eigenschaften hat:
Auf diese Weise können wir ein bestimmtes Logo angeben, um den Status des horizontalen und vertikalen Bildschirms zu identifizieren. Das angegebene Logo muss jedoch vor anderen Schriftarten platziert werden, damit die HMTL -Schriftwechsel nicht verursacht werden.
Der Schlüsselcode lautet wie folgt:
// Callback var resizecb = function () {var hstyle = win.getComputedStyle (html, null), ffstr = hstyle ['font-familie'], pstr = "Porträt" + ffstr, lstr = "Landscape," + ffstr, // Spleißen csSsStr. .Orientation {font-familie: ' + pstr +';}} @media (Orientierung: Landschaft) {.orientation {font-family: ' + lstr +';}} '; // Laststil Loadstylestring (CSSSTR); // Klasse html.classname = 'orientation' + html.classname; if (hstyle ['font-familie'] === pstr) {// initialisieren Sie das Urteil meta.init = 'Porträt'; meta.current = 'Porträt'; } else {meta.init = 'Landscape'; meta.current = 'Landscape'; } return function () {if (hstyle ['font-familie'] === pstr) {if (meta.current! == 'porträt') {meta.current = 'Porträt'; event.trigger ('__ orientationChange__', meta); }} else {if (meta.current! == 'Landscape') {meta.current = 'Landscape'; event.trigger ('__ orientationChange__', meta); }}}}}} ();Der vollständige Code wird hier angeklickt
Testergebnisse
Porträteffekt:
Landschaftseffekt:
Plan 4:
Sie können es verbessern. Verwenden Sie bei der Unterstützung von OrientationChange den nativen OrientierungSchange. Wenn nicht, verwenden Sie Lösung 3.
Der Schlüsselcode lautet wie folgt:
// ob das OrientierungChange -Ereignis unterstützt wird. meta.current = 'Porträt'; } if (win.orientation === 90 || Win.orientation === -90) {meta.init = 'Landscape'; meta.current = 'Landscape'; } return function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'Porträt'; } if (win.orientation === 90 || Win.orientation === -90) {meta.current = 'Landscape'; } event.trigger (eventType, meta); }}; var callback = isorientierung? orientationCB (): (function () {resizecb (); return function () {timer && win.clearTimeout (Timer); Timer = Win.Settimeout (resizecb, 300);}}) (); // Hören Sie sich Win.adDeDeventListener (Isorientation? EventType?Der vollständige Code wird hier angeklickt
Plan 5:
Gegenwärtig werden die obigen Lösungen alle über angepasste Abonnements und Veröffentlichungsmodi implementiert. Hier kann der OrientierungSchange basierend auf dem Ereignismechanismus des Browsers simuliert werden. Das heißt, die Inkompatibilität des OrientierungChange zu beheben.
Der Schlüsselcode lautet wie folgt:
var eventType = 'orientationChange'; // native orientationChangevar fire = function () {var e; if (document.createEvent) {e = document.createEvent ('htmlevents'); E.Initevent (eventType, wahr, falsch); win.dispatchEvent (e); } else {e = document.createEventObject (); E.EventType = eventType; if (win [eventType]) {Win [eventType] (); } else if (win ['on' + eventType]) {Win ['on' + eventType] (); } else {Win.FireEvent (EventType, e); }}}Der vollständige Code wird hier angeklickt
In den oben genannten fünf Lösungen habe ich ein weiteres Verständnis der horizontalen und vertikalen Bildschirmerkennung an mobilen Terminals. Ich weiß nur, warum ich selbst über einige Dinge schreibe, nachdem ich sie selbst erlebt habe. Ich habe auch die Gründe im Artikel aufgezeichnet, in der Hoffnung, dass sie für alle hilfreich sein werden. Nach fünf Lösungen, die sich bis zum letzten Orientierungsprozess entwickelt haben
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.