iPhone

Adaptez vos webapps à l'iPhone 5



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" />

Vos réactions

Malvik2 [26.09.2012 - 14:46] via MacG Mobile

Ok ok mais justement, à quand la maj de macgé pour l'iPhone 5?!! Ça fait long lol;)
Merci pour votre travail

Lesjir [26.09.2012 - 14:54] via MacG Mobile

Et si on ajoute tel://xxxxxxxxx ça ferait plaisir aussi ^^

Malvik2 [26.09.2012 - 14:55] via MacG Mobile

D'ailleurs je trouve que les développeurs ne se pressent pas trop pour les maj des grosses applis...du infinity blade ou du real racing etaient mis a jour dans le passé au moment même de la sortie des nouveaux "ibidules..."

Frodor [26.09.2012 - 19:36] via MacG Mobile

@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à !

Anthony [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 :)

boulninkawaka [26.09.2012 - 15:36] via MacG Mobile

Ok !

rudeboyfred [26.09.2012 - 15:50] via iGeneration pour iPad

Ne voyez aucune critique de ma part mais pourquoi sur Androïd n y a t il pas tous ses "soucis" alors qu Androïd voit des résolutions à mon avis très variés ? Est ce qu Androïd "étire" l affichage ou gère toutes sortes de résolution ?

Elyandrah [26.09.2012 - 17:18] via MacG Mobile

@rudeboyfred :
Malheurement, après avoir testé des systèmes Android, notamment le Galaxy note qui est l'exemple même du grand écran... Les applications ne sont pas du tout optimisées, elles sont étirées, et donc dégueulasses..
C'est une des choses qui m'a fait vite revenir aux iPhone...
Sur l'iPhone 5 je comprends ce choix : les développeurs doivent mettre à jour, sinon ça reste comme sur un ancien iPhone : on ne profite pas du grand écran mais au moins ça fonctionne au mieux !
Ça force les développeurs à travailler, donc oui ça prend du temps, mais au moins le travail est bien fait, et le 4" ne s'obtient pas au détriment de la stabilité et de l'expérience !

coloribus [26.09.2012 - 17:16] via MacG Mobile

Je suis pas sûr de saisir le problème mais c'est sans doute par ce que la hauteur de l'iPhone est également un device-width ? Il faut peut être ajouter une condition dans la meta mediaquerie : "and orientation portrait" ?

dway [26.09.2012 - 19:32] via iGeneration pour iPad

Il manque un espace avant "initial-scale".

Mr. THZ [27.09.2012 - 10:33] via MacG Mobile

Oh encore du boulot...

Utiliser les mêmes identifiants que les forums