Mobile Webseiten per Stylesheet

Wieder einmal ist die Stunde der Web-Standards gekommen. Wer sein Webdesign ernst nimmt, und eine Seite allgemein verfügbar machen will, der darf Handys nicht mehr ignorieren. Unzählige mobile Endgeräte trumpfen mittlerweile mit "echten" Internetzugänge über WLAN (im Gegensatz zu WAP), Voice over IP Funktionalitäten, E-Mail-Anwendungen und natürlich auch Webbrowsern auf. Webbrowser, die jetzt bei der Programmierung und Gestaltung einer Webseite mit berücksichtigt werden müssen.

Natürlich müssen die meisten Webseiten drastisch umgestaltet werden, um auf den kleinen Handydisplays noch zugänglich zu bleiben. Die Lösung liegt auf der Hand: Ein seperater Stylesheet für Handys. Bleibt die Frage, wie man erkennt ob es sich beim Browser über einen "Handy-Browser" oder einen "Computer-Browser" handelt.

Eine Möglichkeit ist es, bei der Einbindung des Stylesheets unter media nicht screen oder print sondern handheld einzugeben

 type="text/css" media="handheld" />

Leider hatte ich mit dieser Methode nicht allzuviel Erfolg, da das media=handheld Attribut offensichtlich noch von vielen mobilen Browser ignoriert wird. Aber es gibt eine weitere Möglichkeit.

Jeder Client (im Normalfall wird der Browser als Client gespeichert) sendet bei jedem Verbindungsaufbau zusammen mit der Anfrage nach Daten auch eine kurze ID in der er Informationen über sich preisgibt. Eine solche ID könnte z.B. so aussehen:

 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

Man erkennt neben einigen weiteren Informationen an der Angabe MSIE 6.0, daß es sich hier um den Internet Explorer 6 handelt.

Diese Browser-ID wird z.B. in PHP standardmäßig in einem Array namens

 $_SERVER["HTTP_USER_AGENT"]

gespeichert. Wir können also einfach eine Funktion schreiben, die den User Agent auf Bezeichnungen und Begriffe prüft, die auf einen Handy-Browser schließen lassen. Dazu gehören Windows CE, Pocket, Mobile, Portable, Smartphone, SDA, PDA, Handheld, Symbian, WAP, Palm, Avantgo, cHTML, BlackBerry, Opera Mini, und Nokia.

Hier die Funktion:

function handyCheck() {

  $agents = array(
    "Windows CE", "Pocket", "Mobile", "Portable",
    "Smartphone", "SDA", "PDA", "Handheld", "Symbian",
    "WAP", "Palm", "Avantgo", "cHTML", "BlackBerry",
    "Opera Mini", "Nokia"
  );

  for ($i=0; $i

    if(
       isset($_SERVER["HTTP_USER_AGENT"])
       &&
       strpos(
               $_SERVER["HTTP_USER_AGENT"],
               $agents[$i]) !== false
             )
      ) {

      return true;

    }
  }

  return false;
}

Ok, was passiert hier? Zuerst erstellen wir ein Array mit allen Begriffen nach denen wir suchen wollen. Dann lassen wir mit einer Schleife alle diese Begriffe nacheinander durchlaufen und prüfen bei jedem einzelnen Begriff

1. ob der HTTP_USER_AGENT überhaupt gespeichert wurde,

2. ob es eine Stelle in dem HTTP_USER_AGENT gibt, die mit dem zu prüfenden Array Eintrag übereinstimmt.

Ist dies der Fall gibt die Funktion ein True zurück und wir können davon ausgehen, daß unsere Seite gerade von einem mobilen Endgerät betrachtet wird. Andernfalls wird ein False zurückgegeben. Anhand dieser True und False returns können wir an der geeigneten Stelle im Header unterschiedliche Stylesheets einbinden. Zum Beispiel so:

if ($this->handyCheck()) {

  echo "

      type="text/css" media="screen" />";

} else {

  echo "

      type="text/css" media="screen" />";

} 

... wobei mobile.css der Stylesheet fürs Handy und screen.css der Stylesheet für den herkömmlichen Computerbrowser ist.

Bis jetzt funktioniert dieser Trick absolut zuverlässig auf allen mobilen Endgeräten die ich bisher in die Finger bekommen konnte.

• 
• 
• 
•