Eine Website, die auf einem 1024 x 768-Pixel-Bildschirm gut aussieht, kann auf einem normalen Smartphone mit beispielsweise 320 x 480 Pixeln eher nicht gut aussehen. Darüberhinaus wird man auf dem mobilen Gerät kaum noch gescheit navigieren können.
Die optimale Lösung für solche Probleme sind unterschiedliche Style-Sheets (CSS) für die verschiedenen Gerätearten.
Dabei erlaubt gerade CSS3 durch die mögliche Einbeziehung von Geräteeigenschaften wie Orientierung (Portrait oder Landscape) oder Bildschirmabmessungen in Pixeln eine saubere Unterscheidung der verschiedenen Geräteklassen.
Hier ein Beispiel für das Einbeziehen von Orientierung und Bildschirmgröße des Endgerätes in die Style Sheet-Definitionen:
@media all and (orientation:portrait) {
/* Allgemeiner CSS für Geräte im Portrait-Modus */
}
@media all and (orientation:landscape) {
/* Allgemeiner CSS für Geräte im Landscape-Modus */
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* CSS für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone */
}
Wenn der Ersteller Ihrer Internetseiten die verschiedenen mobilen Geräte in dieser Art berücksichtigt, macht es auch mit dem Smartphone Spaß, die Seiten aufzurufen.
