<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> iPad Orientierungs-CSS
Chris Coyier am
Das ist ziemlich cool, wünschte, ich hätte ein iPad, um es auszuprobieren..
Ich würde noch ein paar Abfragen hinzufügen. Das hätte den gleichen Effekt auf das iPhone.
Das ist es, wonach ich gesucht habe – ich fand es lächerlich, dass man JavaScript benötigt, um einige Stile basierend auf der Ausrichtung anzuwenden.
Etwas, das man bedenken sollte, ist das Hinzufügen einer Prüfung für die Plattform wie unten
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone') {
document.write("");
document.write("");
}
Auf diese Weise wird es nicht geladen, es sei denn, die Plattform stimmt überein.
An der Stelle der "" die LINKS wie oben aufgeführt. Ich weiß nicht, warum sie nicht angezeigt wurden. :-/
Ich bin kein Fan dieser Lösung (sorry!) – insbesondere, da ein gut konstruiertes, flüssiges Layout diesen Unterschied nicht machen müsste.
Da viele Geräte jetzt native Porträt- und Landschaftsmodi haben, geht es nicht mehr nur darum, das iPad zu berücksichtigen; es ist die physische Breite, nicht die Ausrichtung – die zählt. @media-Abfragen sind unendlich genauer und effizienter, wenn das CSS gut konstruiert ist.
:)