Webentwicklung für das iPhone
Auch wenn das iPhone sogut wie jede Webseite schon sehr gut anzeigt, sind Webseiten, die nicht für das relativ kleine Display designed wurden ohne zu zoomen oft kaum lesbar. Doch es existieren Möglichkeiten, um die Darstellung für das iPhone entsprechend anzupassen, welche ich in diesem Artikel vorstelle.
Viewport
Als erstes sollte man im <head> Bereich das Meta-Tag „viewport“ setzen. Folgende Parameter stehen dabei zur Auswahl:
| Eigenschaft | Standard | Minimum | Maximum |
|---|---|---|---|
| width | 980 | 200 | 10000 |
| height | basierend auf dem Display-Seitenverhältnis | 223 | 10000 |
| initial-scale | an den Bildschirm angepasst | minimum-scale | maximum-scale |
| user-scalable | yes | no | yes |
| minimum-scale | 25 | >0 | 10 |
| maximum-scale | 1,6 | >0 | 10 |
Bei dem width-Parameter sollte man jedoch statt einer statischen Pixel-Anzahl auf das dynamische „device-width“ zurückgreifen.
Beispiel:
1 | <meta name=“viewport“ content=“width=device-width, user-scalable=no“ />
|
CSS
Es ist mittels des media-Parameters des link-Tags möglich, festzulegen, dass eine CSS-Datei nur für Geräte mit einem kleinen Display (wie dem iPhone) verwendet werden soll. Diese Zeile muss jedoch nach den anderen CSS-Referenzierungen folgen, da diese die mobile CSS-Datei andernfalls überschreiben würden.
1 | <link media=“only screen and (max-device-width:480px)“ href=“mobile.css“ type=“text/css“ rel=“stylesheet“ />
|
Das iPhone besizt im Portrait-Modus eine Breite von 320px und im Landscape-Modus eine Breite von 480px. Zuerst sollte man deshalb die Breite vom body-Element festlegen.
1 2 3 | body {
width:320px;
}
|
Ausserdem sollte man die Breite von ein paar Elementen, wie Bildern oder Tabellen, ebenfalls beschränken:
1 2 3 | table, img {
max-width:320px;
}
|
Einzelne Elemente kann man ganz einfach ausblenden, wenn diese nicht in die mobile Version passen:
1 2 3 | .irgendwas {
display:none;
}
|
Schriftarten
Der mobile Safari bietet nur eine begrenzte Anzahl von installierten Schriften, welche man beim designen beachten sollte. Hier ist die Liste:
- American Typewriter
- American Typewriter Condensed
- Arial
- Arial Rounded MT Bold
- Courier New
- Georgia
- Helvetica
- Marker Felt
- Times New Roman
- Trebuchet MS
- Verdana
- Zapfino
Bis auf American Typewriter sind alle Schriftarten in Fett und Kursiv verfügbar.
Metadaten
Du denkst jetzt wahrscheinliche „Metadaten? Hatten wir die nicht oben schon?“. Ja, aber in diesem Abschnitt geht es um das „Drumherum“.
Seitentitel
Beim Wählen des Seitentitels solltest du immer im Hinterkopf haben, dass die maximale Länge eines Titels auf dem Homescreen 12 Zeichen beträgt. Wenn dein Seitentitel also zum Beispiel „Verdammt Langer Titel“ lautet, wird auf dem Homescreen nur „Verd...itel“ erscheinen.
Icon
Man kann ganz einfach ein Icon festlegen, welches beim Bookmarken auf dem Homescreen erscheint. Es muss lediglich die Größe 57px x 57px haben und vom Format PNG sein. Die abgerundeten Ecken und die anderen Effekte fügt das iPhone automatisch hinzu. Das Icon musst du einfach „apple-touch-icon.png“ nennen und es im Homeverzeichnis ablegen.
Du kannst allerdings auch auf die automatischen iPhone Effekte verzichten, dann lautet der Dateiname „apple-touch-icon-precomposed.png“.
Um ein Icon einer bestimmten Unterseite zuzuordnen, genügt folgender Meta-Tag im Header:
1 | <link rel=“apple-touch-icon“ href=“./icon.png“ />
|
bzw.
1 | <link rel=“apple-touch-icon-precomposed“ href=“./icon.png“ />
|
Frameworks
Wenn man nicht from scratch anfangen möchte, kann man auch auf eines der zahlreichen verfügbaren Frameworks für die iPhone User Interface Entwicklung zurückgreifen. Da dieser Artikel jedoch die Grundlagen der iPhone Webentwicklung aufzeigen soll und alles andere auch den Rahmen dieses Artikels sprengen würde belasse ich es hier bei einer Auflistung einiger der populärsten Frameworks. Wahrscheinlich werde ich in späteren Artikeln genauer auf einzelne Frameworks eingehen.
Genauer gesagt handelt es sich bei Dashcode nicht um ein Framework, dennoch lassen sich damit User Interfaces für das iPhone erstellen.Post comment
Zum Kommentieren musst du angemeldet sein.
1 comment
Chris am Dec. 26, 2009 um 6:20 p.m.