web-dev-qa-db-fra.com

Android Web App: Position: corrigé cassé?

Je suis en train de développer une application Web pour mobiles. Je suis allé avec les applications Web parce que cela me semblait une situation gagnante. J'ai besoin de développer une application pouvant également fonctionner sur iPhone /Windows Mobile/Palm, etc.

J'ai commencé à tester aujourd'hui après quelques jours de concepts, d'idées et de conceptions Ce que je voulais faire, c'était avoir un menu qui collait au bas de la page Exactement comme le menu en bas de cette capture d'écran de l'application iPhone :

enter image description here

En utilisant CSS, je pensais que ce serait vraiment facile à faire. Seulement en utilisant Position: fixe; en bas: 0; aurait fait le tour mais j'ai trouvéil ne se comporte pas de la même façon sur les navigateurs mobiles

J'ai essayé de diviser ma page en 2 sections: 1 serait un div. Scrollable .__ (pour le contenu) et l'autre serait le menu du bas . Les divs scrollables ne fonctionnent pas non plus sur Android. J'ai aussi essayé d'utiliser des cadres Sans succès non plus. Est-ce que quelqu'un connaît un moyen de recréer un menu qui resterait au bas d'une page pour les téléphones mobiles?

htmlcssandroidwebkitposition
32
StevenGilligan

Sur mon Android N1 avec CyanogenMod, j'ai aussi 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 aussi mettre 0 au lieu de no.

Fait intéressant, cela interrompt le rendu androïde des boutons, mais il suffit de définir une couleur d’arrière-plan pour les boutons.

50
rizzle

Il suffit d'ajouter:

<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?

16
kad81

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

4
Lyon

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 initiale et la largeur. Cela ne semble toujours pas fonctionner sur les pages Web habituelles.

1
Anders Ekdahl

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 supérieur . J'ai fait un exemple ici: https: //dl.dropbox. com/u/908148/website/test-scroll.html

0
Luca Iulian