In JavaScript kann der Orientierungsmodus erkannt werden mit:
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
Gibt es jedoch eine Möglichkeit, die Ausrichtung nur mit CSS zu erkennen?
Z.B. etwas wie:
@media only screen and (width > height) { ... }
browser
css
tablet
media-queries
Francesco
quelle
quelle
aber es sieht immer noch so aus, als müsste man experimentieren
quelle
Ich denke, wir müssen spezifischere Medienabfragen schreiben. Stellen Sie sicher, dass beim Schreiben einer Medienabfrage keine Auswirkungen auf eine andere Ansicht (Mob, Tab, Desk) auftreten, da dies sonst zu Problemen führen kann. Ich möchte vorschlagen, eine grundlegende Medienabfrage für das jeweilige Gerät zu schreiben, die sowohl die Ansicht als auch eine Orientierungsmedienabfrage abdeckt. Wir müssen nicht beide Medienorientierungsabfragen gleichzeitig schreiben. Sie können sich auf mein Beispiel unten beziehen. Es tut mir leid, wenn mein Englisch nicht sehr gut ist. Ex:
Für Handys
Für Tablet
Desktop
machen Sie nach Ihren Designanforderungen genießen Sie ... (:
Danke, Jitu
quelle
Ich würde mich für ein Seitenverhältnis entscheiden, es bietet viel mehr Möglichkeiten.
Sowohl die Ausrichtung als auch das Seitenverhältnis hängen von der tatsächlichen Größe des Ansichtsfensters ab und haben nichts mit der Ausrichtung des Geräts selbst zu tun.
Lesen Sie mehr: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f
quelle
In Javascript ist es besser,
screen.width
und zu verwendenscreen.height
. Diese beiden Werte sind in allen modernen Browsern verfügbar. Sie geben die tatsächlichen Abmessungen des Bildschirms an, auch wenn der Browser beim Starten der App verkleinert wurde.window.innerWidth
Änderungen, wenn der Browser verkleinert wird, was auf Mobilgeräten nicht möglich ist, aber auf PCs und Laptops.Die Werte von
screen.width
undscreen.height
ändern sich, wenn das mobile Gerät zwischen Hoch- und Querformat wechselt. Daher ist es möglich, den Modus durch Vergleichen der Werte zu bestimmen. Wennscreen.width
größer als 1280px ist, haben Sie es mit einem PC oder Laptop zu tun.Sie können einen Ereignis-Listener in Javascript erstellen, um zu erkennen, wann die beiden Werte umgedreht werden. Die Breitbildwerte für den Porträtbildschirm sind 320px (hauptsächlich iPhones), 360px (die meisten anderen Telefone), 768px (kleine Tablets) und 800px (normale Tablets).
quelle
screen.width
und NICHT drehtscreen.height
, wenn das iPhone gedreht wird. Es werden immer die gleichen Werte gemeldet. Sie müssen diewindow.orientation
Eigenschaft verwenden, um festzustellen, ob das Gerät gedreht wurde ... (der Wert für den