Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 60

• icon : Legt ein Piktogramm für die Webanwendung fest, wenn der Benutzer sie auf
dem Home-Bildschirm speichert. Als Icon wird die hinter icon: stehende PNG-
Datei verwendet.

• statusBar : Die Statuszeile wird in diesem Fall schwarz transparent gesetzt. Alterna-
tiv ist hier noch black möglich. Wird dieser Parameter nicht spezifiziert, wird die
Standardstatuszeile in Grau verwendet.

• startupScreen : Die hinter dem Parameter stehende Bilddatei wird als Startup-
Bildschirm verwendet und so lange angezeigt, bis die Webanwendung vollständig
geladen ist.

1.6.2 CSS-Gestaltung für Hoch- und Querformat

Bei vielen iPhone-Anwendungen und auch bei einigen wenigen mobilen Webseiten ist
es üblich, dass sie gezielt ihr Aussehen nach der Ausrichtung des Telefons ändern, je
nachdem ob der Benutzer es im Hoch- oder im Querformat hält. Im head -Bereich einer
HTML-Datei können Sie mit den folgenden Anweisungen unterschiedliche CSS-Dateien
für die jeweilige Bildschirmausrichtung zuweisen:

<link rel "stylesheet" media "all and (orientation:portrait)"
href "portrait style.css" />
<link rel "stylesheet" media "all and (orientation:landscape)"
href "landscape style.css" />

Das CSS- orientation -Attribut funktioniert auf der iOS-Plattform ab iOS 4.0 für den
iPod touch und das iPhone sowie für das iPad ab Version 3.2. Auch Telefone mit
Android-Betriebssystem verstehen es.

Am besten lässt sich diese Funktionalität wieder anhand eines kleinen Beispiels verdeut-
lichen. Wir erstellen eine einfache mobile Seite, die im Hochformat ein kleineres Bild
auf weißem Hintergrund anzeigt und im Querformat das gleiche Bild lädt, es aber auf
einem schwarzen Hintergrund größer darstellen soll. Zuerst erstellen Sie die CSS-
Zuweisungen für die Hochformatansicht in der Datei portrait-style.css :

body { color: black;
background-color: #ffffff;
font family: Arial;
font size: 12px;
}
#imageContainer {
background: url('stairs.jpg') no repeat top center;
height: 240px;
width: 320px;
}

Setzen Sie am Anfang den ganzen body -Bereich in einen weißen Hintergrund, und neh-
men Sie die üblichen Schriftzuweisungen vor. Weiterhin legen Sie ein ID-Attribut
#imageContainer an, das nicht nur die Bilddatei enthält, sondern auch die Höhe und
Breite des anzuzeigenden Bilds definiert. Das Gleiche machen Sie noch einmal in der
Datei landscape-style.css , allerdings mit etwas geänderten Werten: