Android Web App: Position: fixe cassé?

Question

Je suis en train de développer une Application Web pour les mobiles. J' suis allé avec des applications web parce que pour moi, il semble qu'une situation gagnante d'avoir à développer une application qui pourrait fonctionner aussi sur iPhone / Windows Mobile / pda etc

J'ai commencé à tester aujourd'hui après quelques jours de faire des concepts, des idées et des dessins et ce que je voulais faire était d'avoir un menu qui colle à la en bas de la page. Exactement comme le menu sur le fond dans cet iPhone demande de copie d'écran :

À l'aide de CSS, je pensais qu'il serait vraiment facile de faire cela. Uniquement à l'aide de position:fixed; bottom:0; aurait fait le tour, mais j'ai trouvé elle ne se comportent pas de la même sur les navigateurs mobiles

J'ai essayé de partager ma page en 2 sections : 1 serait un div scrollable (pour le contenu) et l'autre serait le menu du bas. Défilement divs aussi ne fonctionne pas sur Android. J'ai aussi essayé d'utiliser des cadres avec pas de chance non plus. Personne ne sait de toute façon à re-créer un menu qui collait au bas d'une page pour les téléphones mobiles?

Answer 1

Sur mon Android N1 avec CyanogenMod, j'ai également eu ce problème et le correctif:

    <meta
     name="viewport"
     content="width=100%; 
             initial-scale=1;
             maximum-scale=1;
             minimum-scale=1; 
             user-scalable=no;"
    />
 

Spécifiquement la partie user-scalable=no; , vous pouvez également mettre 0 au lieu de no .

Fait intéressant, cela interrompt le rendu androïde des boutons, mais tout ce que vous avez à faire est de définir une couleur de fond pour les boutons.

Answer 2

Ajoutez simplement:

 <meta name="viewport" content="width=device-width, user-scalable=no" />
 

sur la page et vous êtes prêt pour Android 2.2+. Cela a fonctionné sur une page que je testais sur mon téléphone. Source: Quand puis-je utiliser la position CSS: corrigée?

Answer 3

Ceci est censé fonctionner :) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 4

Je viens de recevoir une mise à niveau vers Android 2.2 (Froyo) sur mon HTC Desire, et je suis heureux de dire que cette position corrigée fonctionne désormais, du moins lorsque vous utilisez la balise méta de la fenêtre d'affichage pour définir l'échelle et la largeur initiales. Cela ne semble toujours pas fonctionner sur les pages Web habituelles.

Answer 5

Je confirme que l'utilisation du nom de méta dans votre en-tête HTML

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 

vous aurez un div fixe sur le défilement vertical et horizontal sur Android 2.2, 2.3 et supérieur et iOS 4 et plus. J'ai fait un exemple ici: https://dl.dropbox.com/u/908148/website/test-scroll.html