Ich hatte neulich das Vergnügen für eine bestehende Website auch eine CSS-Datei speziell für iPhone/iPod Touch einzubinden. Dabei hat mir der FAQ-Bereich von “Vorsprung durch Webstandards” sehr geholfen. Der Artikel ist schon etwas länger, daher kann ich euch hier eine kleine Kurzfassung von Punkten wiedergeben, die ich persönlich für wichtig halte:
- Die sichtbare Fläche von iPhone und iPod hat folgende Ausmaße: im Hochformat 320 x 356 Pixel und im Querformat 480 x 208 Pixel
- iPhone und iPod kann man nicht wie andere Handys mit
<link rel="stylesheet" media="handheld" />ansprechen - Allerdings kann man mit etwas CSS3 doch zum Ziel kommen:
media="only screen and (max-device-width: 480px)" - Um das rauszoomen zu verhindern bzw. zu erreichen, dass iPhone/iPod die Website in voller Breite darstellt, sollte man folgendes im Kopfbereich eintragen:
<meta name="viewport" content="width=320" />
Genau nach dem gleichen Prinzip hab ich das Layout von Apfelzeug.de an das iPhone angepasst – bei längeren Artikeln einfach ein Muss, da viel angenehmer zu lesen.
[…] bzw. den iPod touch entwickeln möchte, sind bei Vorsprung durch Webstandards zu finden. [via Perun] « 3. Rocknacht in Koffers […]
Eine Ergänzung: Müsste man in den Header nicht auch noch unbedingt einen Patch für IE lt 6 einbauen (am besten als conditional comment)? Denn der dürfte doch die CSS 3-Anweisung kaum verstehen, oder? 😕