Fermer le menu
Nos tests de l'iPhone 6, de  l'iPhone 6 Plus et de l'iPad Air 2 sont en ligne !

Adaptez vos webapps à l'iPhone 5

Anthony Nelzin | | 14:33 |  11

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.

À gauche, une webapp optimisée pour iPhone 5. À droite, une webapp « letterboxée » qui doit encore être mise à jour.

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" />
Catégorie : 

Les derniers dossiers sur iGen

11 Commentaires

avatar KillerX 26/09/2012 - 19:36via iGeneration pour iPhone

@malvik2 :
Tu dois alors oublier que de tels jeux nécessitent vraiment une adaptation en profondeur.
Ça ne se résume pas à la simple ligne de code avec tous les éléments graphiques; loin de là !

avatar ShowMeHowToLive 26/09/2012 - 15:23

@Malvik2 : on l'a déjà dit, on est en train de finir les tests. Si ça fait long, c'est parce que… c'est long :)

Connexion utilisateur