CSS reaktionsfähiges Design - Erkennung von Portrait-Anzeigen

8

Ich weiß, dass es mit reinem CSS möglich ist, das Stylesheet entsprechend den Bildschirmdimensionen anzupassen:

%Vor%

( Quelle )

Ist es mit pure css möglich, eine Quer- oder Hochformatanzeige zu überprüfen?

    
Keelan 04.05.2013, 11:42
quelle

4 Antworten

10

Ja, mit folgender Syntax:

%Vor%

Weitere Informationen finden Sie in den w3-Spezifikationen .

    
mogelbrod 04.05.2013, 11:47
quelle
3

Sie können die Ausrichtung verwenden:

%Vor%     
Eli 04.05.2013 11:48
quelle
2

Von w3 :

%Vor%     
Vucko 04.05.2013 11:47
quelle
0

Alle Antworten sind falsch. Android wechselt von Hochformat zu Querformat, 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 screen and (min-aspect-ratio: 13/9) { /* landscape styles here */} 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.

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

Und als Fallback können Sie window.screen.width > window.screen.height verwenden, was wirklich alte Android-Geräte betrifft, die die neue window.screen.orientation api

nicht unterstützen

Dann müssen Sie nur noch eine Klasse für die Änderung der Größe / Ausrichtung hinzufügen.

    
Matt 07.03.2018 15:50
quelle