Rien de plus facile avec la propriété CSS position:fixed; n’est-ce pas?

Eh bien non justement. Et pourquoi donc?

Parce qu’Apple, dans sa version mobile de Safari uniquement, a décidé de ne pas supporter cette propriété question d’empêcher quiconque (moi en particulier) de faire un site mobile qui ressemblerait trop à une Application.

Autre solution : créer deux zones (#content et #footer) qui se partagent la fenêtre du iPhone (320×240). On positionne le #footer collé au bas, le #content prend le reste de la hauteur et on lui ajoute un overflow:auto; pour permettre la navigation dans le conteneur principal. Rien de plus simple encore une fois, mais est-ce que ça fonctionne?

NON PLUS!

Encore une fois, notre ami Safari Mobile empêche la navigation à l’intérieur d’un DIV avec overflow:auto; autrement qu’en utilisant ses 2 doigts pour faire le défilement. Pratique et intuitif non? D’ailleurs je gage vous ne le saviez même pas…

Mon prochain test sera de passer par un IFRAME, mais vous vous doutez certainement que je n’en ai pas du tout envie de m’aventurer là-dedans…

–

Comme solution alternative existe cependant ce script très intéressant que j’ai déniché et qui émule les actions de navigation en javascript. Toutefois ce dernier donne une expérience utilisateur plutôt désagréable et très saccadée.

–

Il y a toutefois un peu de lumière au bout du tunnel avec jQTouch, une librairie HTML5 reprenant toutes les animations et interfaces propre au iPhone dans une version compatible avec le webkit mobile.

Reste à voir si ça marchera correctement.

Mais dans l’intervalle Apple, je suis extrêmement déçu.

1. Téléchargez le Java SE Development Kit (JDK)
   • Personnellement j’ai utilisé le simple runtime JDK 6 Update 13
   • Installez-le
2. Téléchargez le SDK Android
   • Ça va vous faire télécharger un dossier compressé,
   • Videz-le, mettons, dans C:/dev/android/
3. Une fois que tout est en place, lancez une invite de commande en allant dans DÉMARRER / EXÉCUTER puis en tapant cmd

Il vous faut maintenant créer un appareil virtuel (AVD – Android Virtual Device). Pour ce faire :

1. Dans l’invite de commande, rendez-vous dans le dossier où vous avez installé Android (ex: C:/dev/android) et accédez au dossier tools (ex: C:/dev/android/tools/).
2. Une fois à l’intérieur tapez la commande :

android create avd --target 2 --name CupcakeVM

Notez que le nom de « CupcakeVP » peut être remplacé comme bon vous semble, mais représente ici « Cupcake » (le nom de code de la version 1.5 de Android) et « VM » (Virtual Machine). Ici, on trouve que c’est plein de bon sens… Il ne vous reste alors qu’à lancer l’émulateur en tapant :

emulator -avd CupcakeVM

Pour plus d’infos je vous recommande la lecture de l’article de Dew sur Alsacréations.