Mobile Web Design

Frontend Entwicklung für mobile Endgeräte

27. Februar 2012
von Michael Schwarz
2 Kommentare

CSS Orientation – Hoch- oder Querformat?

Bei “CSS Orientation” geht es darum, abhängig von Hoch- bzw. Querformat unterschiedliche CSS Dateien wirken zu lassen.
(Hochkant = “portrait” und Querformat = “landscape”)

Das kann einem bei iPhone und Co, und besonders beim iPad und ähnlichen Geräten sehr gelegen kommen. Auf dem Desktop weiss ich nicht so recht, ob’s so nötig ist.

Die Anwendung ist super simpel:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Diese CSS Query funktioniert Stand heute im Firefox, Safari, Chrome und den einschlägigen mobilen Versionen des Webkit-Browsers, sowie im IE9 (also auch Windows Phone 7.5 +).

Hier ein Beispiel für CSS-Orientation (siehe auch dort den Quelltext):

http://mobilewebdesign.de/beispiele/css-orientation.html

CSS Orientation