Auf die CSS3 Funktion Media Query trifft man heute immer wieder im Bezug auf die Optimierung der Darstellung von Websiten auf „speziellen“ Plattformen. Damit sind nicht nur Mobile Endgeräte (Mobiltelefone, Tabletts, etc.) gemeint, sondern auch z.B TV-Geräte, Screenreader, Drucker, etc.
Bei der Darstellungsoptimierung muss man durch Media Queries festlegen, für welches Gerät die Darstellunginformationen ausgewertet werden sollen. D.h. der Browser gleicht die unterstützten Darstellungsfunktionen ab und wendet die CSS Informationen auf die aktuelle HTML Struktur an.
Wenn man jetzt hergehen möchte und die Website für den Ausdruck auf einem Drucker optimieren möchte sieht die Media Query wie folgt aus:
@media print {css code...} |
Man darf hierbei nicht vergessen, dass die CSS Angaben in der Media Query additiv sind. D.h. es gelten alle CSS Angaben und die innerhalb der Media Query werden zusätzlich für dieses Gerät angewendet. Hierzu ein Beispiel; Man hat ein Logo im Header der Website immer auf der Linken Seite. Im Ausdruck soll das Logo aber ausgeblendet werden. Dann muss man die Media Query so gestalten:
@media print { #logo{ display:none; } } |
Bei der Darstellung auf einem Mobil Gerät, muss die Media Query etwas komplexer gestalten werden, als bei einem Drucker. Die Mobilen Endgeräte identifizieren sich nicht eindeutig an Hand eines Merkmales, sondern man muss aus der Kombination von mehreren Eigenschaften quasi eingrenzen, um die Darstellung speziell für dieses Mobile Endgerät zu optimieren. Man verkettet die Abfragen einfach mit AND und OR:
@media screen and (orientation:landscape) and (max-device-width:1600px) and (max-device-height:900px) and (min-width:1500px) { #logo{ display:none; } } |
Das kann relativ müssig sein, die Dimensionen eines speziellen Gerätes herauszufinden. Im Internet findet man immer wieder Tabellen und Listen von unterstüzten CSS Browsereigenschaften die eindeutig ein Gerät bestimmen. Ich habe damit weniger gute Erfahrungen gemacht. Die Angaben haben im seltens Fall gestimmt und anscheinend ist das Patchelevel der Browser oder der Betriebssysteme wohl sehr entscheidend.
Ich verlasse mich daher auf die Größenangaben und die Browsereigenschaften der Geräte selbst. Das hat natürlich den Nachteil, dass man zum Entwicklen die Geräte zur Verfügung haben muss.
Wenn man nun das Gerät tatsächlich zur hat, muss man die Media Optionen des Mobilen Endgerätes ja herausfinden. Hierfür findet man auch eine große menge von Testseiten im Internet. Schade, dass die meisten keine Media Queries gleich ausführen oder gar ein Query Beispiel anzeigen.
Hierfür hab ich eine kleine Generator Seite gebaut. Man muss nur einfach die Seite auf dem Mobile Endgerät aufrufen und man erhält ein paar Vorschläge um die Media Query für das Mobile Endgerät zu gestalten.
