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.
Schlagworte zu diesem Artikel: Browser, CSS, HTML, iPad, iPhone, mobile
Es ist aber so gesehen schon krass, dass man für jedes Gerät eine eigene CSS braucht, ein paar sind ja OK, aber wenn noch mehr Geräte auf dem Markt kommen, dann kann man bald für 20 oder mehr extra Sheets anlegen, da jedes Gerät seine eigenen Wünsche hat.
Nachtrag:
Die Einbindung erfolgt auf dem normalen Weg wie:
?
Im obigen Beitrag wurde mein Beispiel automatisch entfernt:
Ich meinte es so:
link href=“css/default.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ /
ja ganz genau so, wie eine normale CSS-Datei, ist im Endeffekt ja auch eine normale CSS-Datei 😉
Oh, einer noch wach 😉
OK, da hast du recht, klappt soweit auch.
Vorhin hatte ich auf einer anderen Seite was gefunden, klappte nicht, diese Variante schon.
Der CSS funktioniert soweit, vielleicht könntest du eine kleine Beispiel-CSS oder eine kleine Demo-Seite erstellen, wo ggf. die idealen Werte drin stehen und eventuell der jeweilige Ansichtsname des CSS-Abschnitts 🙂
Der Opera-Mini-Simulator (opera.com/developer/tools/mini) erkennt zwar das Hochformat, aber bei Landscape zeigt der den Abschnitt von „only screen and (min-device-width: 320px) and (max-device-width: 480px)“ an, wobei ich von ausgegangen bin, dass „(orientation:landscape)“ verwendet werden würde.
Naja, ist ja schon spät 😉
Als „Testgeräte“ verwende ich die Virtuellen Geräte von „Android SDK Manager“ unter Ubuntu, bei den vorhandene Browser bei Android 2.2,, im Prinzip alle, zeigen nur die Standard-Variante des CSS an, nicht den jeweiligen optimierten, liegt das am SDK dass dieser nicht umschaltet?
Gibt es online-technisch noch andere Möglichkeiten, die Optimierungen an virtuellen Geräten zu testen, die auch mit der CSS-Deklaration umgehen können?
Der Opera-Mini-Simulator (opera.com/developer/tools/mini) wäre ein Werkzeug zum Testen, aber es wäre nicht schlecht, wenn man mehrere Möglichkeiten hätte, um sicher zu gehen, dass die Seite(n) auch korrekt wiedergegeben werden.
PS: einige meiner Beiträge, die unnötig sind, können entfernt werden.
Edit:
Der CSS-Validator meckert über die Deklarationen 🙁
can’t find the error message for nomediarestrictor screen and (min-device-width: 800px) {
Die Eigenschaft orientation existiert nicht für das Medium all )
Die Eigenschaft orientation existiert nicht für das Medium all )
can’t find the error message for nomediarestrictor screen and (min-device-width: 320px) and (max-device-width: 480px)
Scheint so gesehen nicht CSS-konform zu sein?! 🙁
Vendor-Prefixes für CSS3 sind auch nicht konform oder anders gesagt das W3C ist einfach zu lahm und kommt dem Web nicht mehr nach …
Ach so.
Also könnte man trotz der »Lahmheit« des »W3C«’s diese Variante nutzen?
Ich habe auf dieser Seite http://www.senaeh.de/kommentar-wozu-vendor-prefixes/ gelesen, dass CSS3 geplanter Weise wohl erst in 10 Jahren seine Gültigkeit finden soll, das finde ich ein bisschen sehr lahm, da bin ich Ende 41 *hust* 🙁
[OT]
M$ kann mit dem IE9 erst z.B. die Rundungen von Boxen dar stellen, der FF konnte das etwas früher.
Ich wollte ursprünglich etwas tranzparenz sowie Rundungen der Div’s per CSS nutzen, ohne irgendetwas wegen Kompatibilität in JS was machen zu müssen, da auch nicht jeder JS aktiviert hat. Leider gibt es immer wieder Seiten, die JS zwingend voraussetzen, wobei die Seite auch ohne JS anzeigbar wäre. JS sollte auch nicht wirklich zum gestalten einer Seite verwendet werden.
An sich ist es schon irgendwie schade, dass einige Browser-Anbieter sich ihr »eigenes Süppchen kochen«.
Der IE ist so gesehen ein Nachzügler, was mich einerseits herzlichst weniger interessiert, da ich überwiegend mit Ubuntu und dem FF und anderen Browsern »unterwegs« bin.
[/OT]
Ja kann man nutzen.
OK, dann weiß ich Bescheid 🙂
Hallo,
ich habe mir, da ich es satt war, nur mit einem Monitor zu arbeiten, nach vielen Jahren wieder einen neuen Monitor zu meinem heutigen Geburtstag zugelegt 😀
Da es Monitore wie auch Fernseher mit 1920×1080 gibt, könnte man einfach zu den bestehenden einfach einen neuen Abschnitt speziell für die Auflösung hinzufügen, wobei bei dem neuen der »Luxus« ist, dass man diesen auch nach 90 Grad drehen kann, wobei ich bei Ubuntu schauen müsste, wie dies geändert werden könnte.
Ich dachte bei den speziellen Auflösungen an folgendes (ungetestet) 😉
@media only screen and (device-width: 1920px) and (orientation:portrait) {
/* Hier der CSS-Code speziell für 1080p im Hochformat */
}
@media only screen and (device-width: 1080px) and (orientation:landscape) {
/* Hier der CSS-Code speziell für 1080p im Querformat */
}
Wenn ich Lust habe, erstelle ich eine Testseite, welcher aktuelle Wert aktiv ist. Ich hoffe dass es auch klappt 😉
Gerade bei Monitore mit höhere Auflösungen könnte man mehr raus holen, vielleicht größere Ansichten der Seite oder so 😉
Nachtrag:
gerade eben ist mir nach dem Absenden was aufgefallen und habe mich dort oben vertan, so gesehen müsste der Abschnitt folgendermaßen aussehen:
@media only screen and (device-width: 1920px) and (orientation:landscape) {
/* Hier der CSS-Code speziell für 1080p im Querformat */
}
@media only screen and (device-width: 1080px) and (orientation:portrait) {
/* Hier der CSS-Code speziell für 1080p im Hochformat */
}