Het kiezen van een Website icoon voor de iPhone homescreen
Bij het kiezen van een icoon maakt het niet veel uit of je hem zelf goed aanpast voor het iPhone beginscherm. De iPhone kan namelijk zelf ze volgende aspecten toevoegen:
- ronde contouren
- schaduw
- glimmende spiegeling

En dit is hoe dat er dan uit zal zien op je iPhone scherm:

Nu denk je vast, hoe zet ik dit nou in mijn website en wat is dat rechter icoon dan? Nou daar hebben we ingesteld dat de iPhone niet de visuele aspecten toevoegd en om het op je website toe te voegen kun je de volgende codes toevoegen:
- plaats het icoon bestand in PNG formaat in je root folder waar je pagina zelf ook staat genaamd apple-touch-icon.png of apple-touch-icon-precomposed.png. Met deze methode zal dit icoon voor dehele website toegepast worden(elke pagina). Wanneer je precomposed in de afbeeldingsnaam zet zullen er geen visuele aspecten worden toegevoegd.
Je kunt ook een regel toevoegen in je header, zoals:
<link rel="apple-touch-icon" href="/custom_icon.png">
<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png">
Verberg Safari componenten
Voeg deze META tag toe om er voor te zorgen dat de Safari componenten worden verborgen, je krijgt dus een volledig scherm:
<meta name="apple-mobile-web-app-capable" content="yes">
Status Balk Uiterlijk
Je kunt de Status balk van je web app/website veranderen door middel van de volgende code:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Er zijn drie verschillende kleuren:
1standaard (default)
2zwart (black)
3zwart-doorzichtig (black-translucent)
NOTE: Wanneer je dit instelt naar 'default' of 'black', de webinhoud zal dan worden weergegeven onder de status balk. Wanneer je het instelt op 'black-translucent', de webinhoud wordt dan weergegeven op het gehele schermthe web content is displayed on the entire screen, gedeeltelijk verduisterd door de status balk.
Specificeer een Opstart afbeelding
On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:
<link rel="apple-touch-startup-image" href="/startup.png">
Hier een voorbeeld voor een Duken.NL startup:

De afbeelding moet een .PNG bestand zijn met een afmeting van 320x460 pixels.
NOTE: deze optie werkt alleen wanneer apple-mobile-web-app-capable is ingesteld op yes.
Opmerkingen & conclusie
Al deze tips werken alleen op de webpagina's die zijn opgeslagen op het begin scherm door middel van het toevoegen van een bladwijzer, wanneer je gewoon via safari naar je website gaat zul je deze aanpassingen niet ervaren. Onthou dat elke nieuwe link die geopend wordt, er voor zal zorgen dat je deze instellingen verliest. Ik denk ook dat dit wel een idee is om in de Duken.NL mobiele site te implementeren.
bron
Veranderd door Wous, 19 januari 2012 - 09:55
















