CSS für iPhone und iPod touch

Peruns Weblog - Webwork und Internet

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet. Ältere Artikel findest du im Archiv.

CSS für iPhone und iPod touch

Perun am 27. September 2008 um 21:55 Uhr

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" />

Diesen Artikel weiterempfehlen:

1. – Sergej Müller

Kommentar vom 27. September 2008 um 23:17

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.

2. – Websites für das iPhone oder iPod touch gestalten | Notizn

Pingback vom 28. September 2008 um 00:09

[...] bzw. den iPod touch entwickeln möchte, sind bei Vorsprung durch Webstandards zu finden. [via Perun] « 3. Rocknacht in Koffers [...]

3. – Frank Hofmann

Kommentar vom 06. Mai 2009 um 09:28

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?

Einen Kommentar hinterlassen

Peruns Weblog - Webwork und Internet