Surprise : beaucoup de webapps ne sont pas adaptées à l'iPhone 5 et apparaissent « letterboxées » alors qu'elles s'affichent en plein écran dans Safari. Il faut en fait procéder à quelques modifications, et au passage en profiter pour s'adapter au nouveau ratio de l'écran.
Remplir l'écran de l'iPhone 5
Beaucoup de développeurs web utilisent la balise suivante dans la définition de leur site comme une webapp pour iOS :
<meta name="viewport" content="initial-scale=1, width=device-width" />
Après avoir comparé plusieurs webapps sur iPhone 5, il semble que la déclaration de la largeur du viewport pose problème. Pour qu'une webapp s'adapte à la hauteur de l'écran de l'iPhone 5, il suffit tout simplement de supprimer cette déclaration :
<meta name="viewport" content="initial-scale=1" />
Apple n'a pas mis à jour sa documentation sur la question et ne fournit donc aucune explication.
Adapter une web-app à l'iPhone 5
Il vous faudra sans doute revoir quelques éléments pour adapter votre webapp au ratio 16:9 de l'iPhone 5. On pense d'abord et avant à l'image de lancement : après avoir créé une version 460x320 pixels pour les premiers iPhone, puis une version 920x640 pixels pour les iPhone Retina, il vous faudra désormais prévoir une version 1096x640 pixels. Les balises restent inchangées :
<link rel="apple-touch-startup-image" href="~/default.png" />
<link rel="apple-touch-startup-image" sizes="640x920"
href="~/default@2x.png" />
<link rel="apple-touch-startup-image" sizes="640x1096"
href="~/default-iphone5.png" />
