Wie erkenne ich die Geräteorientierung mithilfe von CSS-Medienabfragen?

159

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) { ... }
Francesco
quelle

Antworten:

435

CSS zum Erkennen der Bildschirmausrichtung:

 @media screen and (orientation:portrait) {  }
 @media screen and (orientation:landscape) {  }

Die CSS-Definition einer Medienabfrage finden Sie unter http://www.w3.org/TR/css3-mediaqueries/#orientation

Richard Schneider
quelle
66
Hinweis: Dieser Wert entspricht nicht der tatsächlichen Geräteorientierung. Wenn Sie die Softtastatur auf den meisten Geräten im Hochformat öffnen, wird das Ansichtsfenster breiter als hoch, sodass der Browser Querformatstile anstelle von Hochformat verwendet.
Johann Combrink
9
@JohannCombrink Wirklich wichtig, dass du das erwähnt hast. Durch Öffnen der Tastatur wird das Design durcheinander gebracht. Gut, dass Sie darauf hinweisen.
Lowtechsun
Referenz für @ JohannCombrinks Kommentar: stackoverflow.com/q/8883163/363448
ndequeker
4
Es ist möglicherweise keine schlechte Sache, einen anderen Stil anzuwenden, wenn die Tastatur geöffnet wird, da der sichtbare Bereich im Allgemeinen besser für den Stil geeignet ist, der für den Querformatmodus gilt. Also vielleicht kein Mist.
Muhammad bin Yusrat
Ich mag Mohammeds Kommentar: Wenn eine Softwaretastatur bewirkt, dass ein Ansichtsfenster kürzer als breit ist, ist das Ansichtsfenster daher im Querformat ausgerichtet (selbst wenn Sie das physische Gerät normal halten). Das CSS funktioniert meiner Meinung nach wie beabsichtigt.
Benny
36
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

aber es sieht immer noch so aus, als müsste man experimentieren

Mistagrooves
quelle
1
Die Ausrichtung hängt vom Gerät ab. Einige Tablets geben im Querformat die Ausrichtung = 0 an. iPhones berichten anders als Samsung Galaxies.
BlackMagic
21

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

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Für Tablet

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Desktop

machen Sie nach Ihren Designanforderungen genießen Sie ... (:

Danke, Jitu

jitu
quelle
4

Ich würde mich für ein Seitenverhältnis entscheiden, es bietet viel mehr Möglichkeiten.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

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

BastianBalthasarBux
quelle
0

In Javascript ist es besser, screen.widthund zu verwenden screen.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.widthund screen.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. Wenn screen.widthgröß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).

Schwarze Magie
quelle
Es ist wichtig zu beachten, dass iOS die Werte screen.widthund NICHT dreht screen.height, wenn das iPhone gedreht wird. Es werden immer die gleichen Werte gemeldet. Sie müssen die window.orientationEigenschaft verwenden, um festzustellen, ob das Gerät gedreht wurde ... (der Wert für den
Querformatmodus