CSS für iPhone und iPod touch

Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema WordPress, Webwork, und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.

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

2 Kommentare »»

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 [...]

Einen Kommentar hinterlassen

Name (erforderlich)

Mail (wird nicht veröffentlicht) (erforderlich)

Website

XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu <).

Peruns Weblog - Webwork und Internet