Ich baue eine Website speziell für mobile Geräte. Es gibt insbesondere eine Seite, die am besten im Querformat angezeigt wird.
Gibt es eine Möglichkeit zu erkennen, ob der Benutzer, der diese Seite besucht, sie im Hochformat anzeigt, und in diesem Fall eine Meldung anzuzeigen, die den Benutzer darüber informiert, dass die Seite am besten im Querformat angezeigt wird? Wenn der Benutzer es bereits im Querformat anzeigt, wird keine Meldung angezeigt.
Grundsätzlich möchte ich, dass die Site die Ausrichtung des Ansichtsfensters erkennt. Wenn die Ausrichtung Hochformat ist , wird eine Warnmeldung angezeigt, die den Benutzer darauf hinweist, dass diese Seite am besten im Querformat angezeigt wird .
orientationchange
Ereignis kombiniert wird . Es wird die alte Ausrichtung anstelle der neuen Ausrichtung angezeigt. Diese Antwort funktioniert gut in Kombination mit demorientationchange
Ereignis.Sie können auch verwenden
window.matchMedia
, was ich verwende und bevorzuge, da es der CSS-Syntax sehr ähnlich ist:Getestet auf iPad 2.
quelle
David Walsh hat einen besseren und präzisen Ansatz.
Während dieser Änderungen kann sich die Eigenschaft window.orientation ändern. Ein Wert von 0 bedeutet Hochformat, -90 bedeutet, dass das Gerät im Querformat nach rechts gedreht wird, und 90 bedeutet, dass das Gerät im Querformat nach links gedreht ist.
http://davidwalsh.name/orientation-change
quelle
Sie können CSS3 verwenden:
quelle
Es gibt einige Möglichkeiten, dies zu tun, zum Beispiel:
window.orientation
WertinnerHeight
vs.innerWidth
Sie können eine der folgenden Methoden anpassen.
Überprüfen Sie, ob sich das Gerät im Hochformat befindet
Überprüfen Sie, ob sich das Gerät im Querformat befindet
Anwendungsbeispiel
Wie erkenne ich die Orientierungsänderung?
quelle
Ich denke, die stabilere Lösung besteht darin, Bildschirm anstelle von Fenster zu verwenden, da es beides sein kann - Querformat oder Hochformat, wenn Sie die Größe Ihres Browserfensters auf dem Desktop-Computer ändern.
quelle
Um all diese großartigen Kommentare auf meine tägliche Codierung anzuwenden und die Kontinuität zwischen all meinen Anwendungen zu gewährleisten, habe ich beschlossen, Folgendes sowohl in meinem jquery- als auch in meinem jquery-Mobilcode zu verwenden.
quelle
Versuchen Sie nicht, feste Fenster auszurichten. Orientierungsabfragen (0, 90 usw. bedeuten nicht Hochformat, Querformat usw.):
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
Selbst unter iOS7 ist 0 nicht immer Hochformat, je nachdem, wie Sie in den Browser gelangen
quelle
Nach einigen Experimenten habe ich festgestellt, dass das Drehen eines orientierungsbewussten Geräts immer das
resize
Ereignis eines Browserfensters auslöst . Rufen Sie in Ihrem Resize-Handler einfach eine Funktion auf wie:quelle
Ich habe zwei Lösungen kombiniert und es funktioniert gut für mich.
quelle
Ich bin mit der am häufigsten gewählten Antwort nicht einverstanden. Verwenden Sie
screen
und nichtwindow
Ist der richtige Weg, es zu tun. Wenn Sie mit rechnen
window.height
, haben Sie Probleme mit Android. Wenn die Tastatur geöffnet ist, wird das Fenster verkleinert. Verwenden Sie also Bildschirm anstelle von Fenster.Das
screen.orientation.type
ist eine gute Antwort, aber mit IE. https://caniuse.com/#search=screen.orientationquelle
Holen Sie sich die Orientierung (jederzeit in Ihrem js-Code) über
Wenn Sie
window.orientation
zurückkehren0
oder wenn180
Sie sich im Hochformat befinden , wenn Sie zurückkehren90
oder wenn270
Sie sich im Querformat befinden .quelle
Nur CCS
In einigen Fällen möchten Sie möglicherweise einen kleinen Code zum erneuten Laden auf die Seite hinzufügen, nachdem der Besucher das Gerät gedreht hat, damit das CSS ordnungsgemäß gerendert wird:
quelle
quelle
quelle
Eine weitere Alternative zur Bestimmung der Ausrichtung anhand des Vergleichs von Breite / Höhe:
Sie verwenden es für das Ereignis "Größe ändern":
quelle
iOS wird nicht aktualisiert
screen.width
undscreen.height
wenn sich die Ausrichtung ändert. Android wird nicht aktualisiert,window.orientation
wenn es sich ändert.Meine Lösung für dieses Problem:
Sie können diese Orientierungsänderung sowohl auf Android als auch auf iOS mit dem folgenden Code erkennen:
Wenn das
onorientationchange
Ereignis nicht unterstützt wird, ist das Ereignis an das Ereignis gebundenresize
.quelle
Wenn Sie die neuesten Browser haben
window.orientation
, funktioniert dies möglicherweise nicht. Verwenden Sie in diesem Fall den folgenden Code, um den Winkel zu ermitteln:Dies ist immer noch eine experimentelle Technologie, können Sie die Browser - Kompatibilität überprüfen hier
quelle
Vielen Dank an tobyodavies für die Anleitung.
Um eine Warnmeldung basierend auf der Ausrichtung des Mobilgeräts zu erhalten, müssen Sie das folgende Skript in der implementieren
function setHeight() {
quelle
Anstelle von 270 kann es -90 (minus 90) sein.
quelle
Dies erweitert eine vorherige Antwort. Die beste Lösung, die ich gefunden habe, besteht darin, ein harmloses CSS-Attribut zu erstellen, das nur angezeigt wird, wenn eine CSS3-Medienabfrage erfüllt ist, und dann den JS-Test für dieses Attribut durchzuführen.
So hätten Sie beispielsweise im CSS:
Sie gehen dann zu JavaScript (ich verwende jQuery für Funsies). Farbdeklarationen mögen seltsam sein, daher möchten Sie vielleicht etwas anderes verwenden, aber dies ist die narrensicherste Methode, die ich zum Testen gefunden habe. Sie können dann einfach das Größenänderungsereignis verwenden, um das Umschalten zu erfassen. Alles zusammen für:
Das Beste daran ist, dass diese Antwort zum Zeitpunkt des Schreibens keine Auswirkungen auf Desktop-Schnittstellen zu haben scheint, da sie (im Allgemeinen) kein Argument zur Orientierung an die Seite übergeben (scheinen).
quelle
Hier ist die beste Methode, die ich gefunden habe, basierend auf David Walshs Artikel ( Orientierungsänderung auf Mobilgeräten erkennen )
Erläuterung:
Window.matchMedia () ist eine native Methode, mit der Sie eine Medienabfrageregel definieren und ihre Gültigkeit zu jedem Zeitpunkt überprüfen können.
Ich finde es nützlich, einen
onchange
Listener an den Rückgabewert dieser Methode anzuhängen . Beispiel:quelle
Ich habe für Android Chrome "The Screen Orientation API" verwendet.
Um die aktuelle Ausrichtung anzuzeigen, rufen Sie console.log (screen.orientation.type) (und möglicherweise screen.orientation.angle) auf.
Ergebnisse: Porträt-Primär | Porträt-Sekundär | landschaftlich-primär | landschaftssekundär
Unten ist mein Code, ich hoffe es wird hilfreich sein:
quelle
quelle
Das Fensterobjekt in JavaScript auf iOS-Geräten verfügt über eine Ausrichtungseigenschaft, mit der die Drehung des Geräts bestimmt werden kann. Im Folgenden wird die Wertefensterausrichtung für iOS-Geräte (z. B. iPhone, iPad, iPod) in verschiedenen Ausrichtungen angezeigt.
Diese Lösung funktioniert auch für Android-Geräte. Ich habe im nativen Android-Browser (Internetbrowser) und im Chrome-Browser eingecheckt, auch in den alten Versionen.
quelle
Das benutze ich.
Implementierung
quelle
quelle
Es gibt eine Möglichkeit, mit der Sie erkennen können, ob Benutzer ihr Gerät mithilfe von in den Hochformatmodus versetzt haben
screen.orientation
Verwenden Sie einfach den folgenden Code:
onchange
Wird jetzt ausgelöst, wenn der Benutzer das Gerät umdreht, und es wird eine Warnung angezeigt, wenn der Benutzer den Hochformatmodus verwendet.quelle
Beachten Sie,
window.orientation
dass es zurückgegeben wird,undefined
wenn Sie sich nicht auf einem mobilen Gerät befinden. Also eine gute Funktion für die Ausrichtung zu überprüfen , wie diese aussehen könnte, wox
istwindow.orientation
:Nennen Sie es so:
quelle
Oder Sie könnten dies einfach verwenden ..
quelle