CSS Responsive Design - erkennen Portrait-Anzeige

Question

ich weiß, dass es mit reinem CSS möglich, das Stylesheet nach Bildschirmabmessungen anzupassen, wie folgt aus:

@media (max-width: 959px) { 
    /* styles for smallest viewport widths */ 
} 

@media (min-width: 600px) and (max-width: 959px) { 
    /* styles for mid-tier viewport widths */ 
} 

@media (min-width: 960px) { 
    /* original CSS styles */ 
} 

^(source)

Ist es mit rein css möglich, auf einem Querformat oder Hochformat zu überprüfen?

Answer 1

Ja, mit folgenden Syntax:

@media all and (orientation: landscape) {} 

Siehe w3 specs für weitere Informationen.

Answer 2

Von w3:

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

Answer 3

können Sie orientation verwenden:

@media all and (max-width: 959px) and (orientation : portrait) { 
    /* Styles */ 
} 

Answer 4

Alle Antworten sind falsch. Android wechselt von Porträt zu Landschaft, wenn die Tastatur angezeigt wird.

Verschiedene Tastaturen müssen ebenfalls getestet werden, da sie mehr vertikalen Platz einnehmen können. Swift-Tastatur nimmt mehr vertikalen Platz ein, so dass Sie keine Lösungen wie @media-Bildschirm und (min-aspect-ratio: 13/9) {/ * Landschaftsstile hier * /} verwenden können, da dies auf vielen Telefonen fehlschlagen wird.

Die einzige Lösung ist die Verwendung von Javascript.

Auf neueren Android-Geräten können Sie die neue window.screen.orientation API testen und verwenden.

Auf iOS können Sie window.orientation verwenden, die gut funktioniert. dh Math.abs (window.orientation) === 90 ist Landschaft

Und als Fallback können Sie window.screen.width> window.screen.height verwenden, die wirklich alte Android-Geräte abdecken, die das neue Fenster nicht unterstützen .screen.orientation api

Dann müssen Sie nur noch eine Klasse hinzufügen oder entfernen, die auf resize/orientationchange -Ereignissen basiert.