In diesem Tutorial möchte ich euch zeigen, wie ihr mittels CSS @media extra StyleSheets für Desktop-Browser, Smartphones (iPhone, Android, WebOS, ect. – Geräte) und Tablet-Computer (speziell iPad) anlegen könnt. Mittels dieser Methode könnt ihr ein und denselben HTML / CSS Code für alle Geräte optimieren. Fälschlicherweise bezeichnen viele diese @media Einbindungen als CSS-Browserweiche, dabei ist es eher eine Systemweiche, wenn man es überhaupt so nennen kann.
Jedenfalls tun sich durch diese Variante einige Vorteile für euch auf:
- einfachere Optimierung von mobilen Seiten, da keine extra mobile Seite angelegt werden muss
- alles in einer CSS, die Codes können so aufeinander aufbauen
Wie genau das mit @media funktioniert möchte ich euch nun zeigen:
@media all and (orientation:portrait) {
/* Hier der allgemeine CSS-Code für Geräte im Portrait Modus */
}
@media all and (orientation:landscape) {
/* Hier der allgemeine CSS-Code für Geräte im Landscape Modus */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */
}
/* Computer und Tablet CSS */
@media only screen and (min-device-width: 800px) {
/* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */
}
@media only screen and (device-width: 768px) {
/* Hier der CSS-Code speziell für das iPad */
}
@media only screen and (device-width: 768px) and (orientation:portrait) {
/* Hier der CSS-Code speziell für das iPad im Portrait Modus */
}
Alle Beispiele lassen sich auch kombinieren z.B. das letzte, da haben wir eine spezielle CSS für das iPad im Portrait Modus, des Weiteren sollte ihr euch über den unterschied zwischen device-width und width klar machen. Bei width wird die Weite des Browserfensters berücksichtigt, dieser Wert ändert sich also wenn das Browserfenster in der Größe verändert wird. Die device-width hingegen ist fest, denn sie berücksichtigt die generell verfügbare Weite des Gerätes (device), daher verlassen wir uns in den Beispiel auch nur auf die device-width, ansonsten würde die iPhone Variante auch auf einem kleiner gezogenen Desktop-Browser angezeigt.
Eine weitere sehr coole Funktion ist die orientation-detection, damit können wir extra CSS für Geräte anlegen die z.B. einen Portrait oder Landscape Modus haben (z.B. iPhone, iPod, iPad, Android-Handy’s usw.).
Ich selber finde diese Variante sehr nützlich und hoffe, dass es auch euch weiterhilft.