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" />
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
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? 😕