Blog, HTML / CSS

Home-Screen Bookmark Icon für iPhone

WordPress Entwickler und Webdesigner

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.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.