: Schöneres Internet für jede Breite
Peter-Paul Koch hat auf QuirksMode einen interessanten Artikel über CSS Media Queries und ihre Verwendung bei mobilen Internetauftritten geschrieben. Primär geht es eigentlich darum, dass iPhone und iPad im Gegensatz zu Android Fehler bei der Auswertung der zur Verfügung stehenden Breite macht. Mir ist in diesem Zusammenhang aber etwas ganz anderes aufgefallen:
Ihr benutzt gerade einen aktuellen Firefox, Safari, Chrome oder Opera? Dann verkleinert doch mal bitte kurz die Fenstergröße eures Browsers und beobachtet den Header, bzw. die Servicespalte.
Richtig gesehen: Ab einer bestimmten Größe schrumpft der Header, und danach nochmals, während die Servicespalte unter den Content klappt. Denn alle oben genannten modernen Browser werten auf Fenstergrößen bezogene CSS Media Queries aus. Und witzigerweise auch beim Verändern der Fenstergröße.
Damit kann man jetzt nicht nur die eigene Website mit CSS Media Queries an mobile Browser anpassen (z.B. via @media all and (max-width: 480px)), sondern auch an beliebige Fenstergrößen. So ist es möglich z.B. für die Besitzer kleiner Note- und Netbooks ein leicht verändertes Layout ausliefern, oder für Nutzer eines super-hochauflösenden Monitors. Und das Schönste ist, dass dies alles ohne Javascript möglich ist.
Zusätzlich zu den regulär an Rechnern üblichen Auflösungen sollte also jeder Designer die folgenden Displaygrößen im Auge behalten:
- Smartphones: 320px × 480px (bzw. andersherum)
- Netbooks: 1024 × 600 px
- HDTV-Geräte mit voller Auflösung: 1920 × 1080 px (die aber auch von manchen PC-Monitoren verwendet wird)
Folgende Zeilen als Denkanstoß:
@media all and (max-width: 1920px) {
body {font-size:160%;}
}
@media all and (max-height: 600px) {
#header {height:100px;}
}
Schade nur, dass es keine Möglichkeit gibt, die DPIs des Browsers herauszufinden…
Update: PPK hat einen Artikel über die neue Generation von hochauflösenden Smartphones und Media Queries geschrieben. Das ändert nochmals ein klein wenig die Spielregeln. Es lohnt sich also, den QuirksBlog zu beobachten.
