Home-Screen Bookmark Icon für iPhone

Das iPhone hat seinen Siegeszug im Smartphone Bereich schon vor mehr als 1 Jahr begonnen und ringt aktuell Herstellern wie RIM (Research In Motion – Black Berry) die Marktanteile. Dies ist allerdings gar nicht mal der wichtigste Punkt auf den ich hinaus will, sondern das iPhone Nutzer prozentual viel häufiger und länger im Netz surfen als andere Smartphone-Besitzer. Somit macht es natürlich Sinn seine Webseite mit ein paar kleinen Kniffen an die Gegebenheiten des iPhone anzupassen.

Oftmals reichen hier schon Kleinigkeiten um Webseiten für das iPhone einwenig schöner zu machen. Zum Beispiel ein Bookmark Icon für den Home-Screen vom iPhone. Dieser ist vergleichbar mit einem Favicon bei den Desktop-Browsern.

Mit folgendem Code könnt ihr ein eigenes Icon einbinden. Das Icon muss ein PNG sein und 57×57 Pixel groß.

<link rel="apple-touch-icon" href="/Pfad/iphone-icon.png" />

Wer eine extra mobile CSS einbinden möchte um zum Beispiel kleine Schönheitsfehler zu eliminieren, die auf dem iPhone dargestellt werden, kann dies mithilfe des folgenden Codes tun:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" />

Durch media=“only screen and (max-device-width: 480px)“ wird diese CSS ausschließlich in Browsern geladen die „Screen-Geräte“ sind und eine maximale Weite von 480 Pixeln haben.

Eine gute Webseite zum testen eurer eigenen Webseite auf kompatibilität zum iPhone ist dieser online iPhone Simulator unter: www.iphone4simulator.com/. Dieser rendert allerdings nicht als iPhone sondern mit dem Browser, mit dem ihr die Seite aufruft. Nehmt also am besten eine aktuelle Safari Version.

Umfassende Informationen zur WebEntwicklung auf den mobilen Apple Geräten findet ihr in Apples Dev Center: http://developer.apple.com/devcenter/safari/index.action

Viel Spaß mit den kleinen Tipps.