Dans le cadre du recodage du site http://leplusintelligent.com (précédemment codé en php) en Ruby (oui oui, je suis dans ma période Ruby ^^), j'ai été amené à réétudier la version mobile, que je devais donc elle aussi recoder en Ruby (ô joie).
Auparavant, j'utilisais Jqtouch pour faire des WebApps adaptées à l'iphone. Mais, au final, cette librairie est lourde, pour faire peu de choses, puisqu'ayant moi même déjà codé une couche ajax pour l'appli.
J'ai donc "fouillé" dans le code jqtouch, et en ai extrait 3 lignes, qui font exactement le résultat que je souhaitais à la base, sans charger tout Jqtouch (donc gain de temps, et résolution de certains problèmes de conflits dans les fonctions js que j'avais codé).
Pour définir la "favicon", qui sera l'image de votre webapp sur "l'écran d'accueil" de l'utilisateur iphone (après ajout via la barre inférieure)
Pour faire se lancer votre webapp en pleine écran (dans safari, mais sans aucune barre de navigation , comme une véritable application):
<meta name="apple-mobile-web-app-capable" content="yes" />Et pour ajouter une image de préchargement, qui s'affichera après appui sur l'icône de votre webapp sur l'écran d'accueil de l'utilisateur iphone :
<link rel="apple-touch-startup-image" href="/images/chargement.jpg" />Et ces 3 lignes me suffisent amplement.
Côté site, je me contente de rajouter une feuille de style spécifique (après détection de l'user-agent via Ruby ). Dans ma feuille principale, j'ajoute une classe .for_iphone contenant :
.for_iphone{ display:none; }
Dans ma feuille iphone :
.for_iphone{display:block;}
.no_iphone{display:none;}
Et puis j'adapte le reste du site toujours via ma feuille css iphone.
Mais chacun sa méthode, à ce niveau là :)
Jeu de briques
Snake
Pacman
Bubble