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

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

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

@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

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

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

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).