Homepage mit iPhone Homescreen Icon

Quickstart

<meta name="viewport" content="width=device-width", initial-scale=1.0, maximum-scale=1.0 />	
<meta name="apple-mobile-web-app-capable" content="yes" />	
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />	
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png" />	
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />	
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />	
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png" />	
<link rel="apple-touch-icon" href="fileadmin/templates/media/apple-touch-icon.png"/>

Das Apple iOs Betriebssystem ermöglicht es auch Homepages über einen Button auf dem Homescreen direkt anzusteuern. So wirkt eine Homepage oder WebApp wie eine richtige App.

WebApp-Feeling mit Apple Touch Icon für iPhone, iPad und Co

Standardmäßig machen iOS Geräte einen Mini Screenshot der Seite und platzieren ihn auf dem Homescreen, wenn man dort eine Seite als Lesezeichen ablegt. Schicker ist es wenn man einen eigenen Button bastelt.

Im Root Verzeichnis der Homepage muss der Button platziert werden:

Name:

apple-touch-icon.png 

hierbei berechnet das iPhone,iPad,... automatisch einen Glanzeffekt

apple-touch-icon-precomposed.png

ohne Glanzeffekt

Format: png 

oder den Ort und den Namen selbst wählen und in der HTML Datei den Link folgendermaßen angeben:

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

Hier spielt der Name keine Rolle

Größe: 45x45, 57×57 Pixel oder 60×60 Pixel (schärfer) -> inzwischen 114x114 für die neuesten Devices (ipad2... Retina)

oder den Ort und den Namen selbst wählen und in der HTML Datei den Link folgendermaßen angeben:

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