Application Web Android: Position: fixe cassé?

Je suis en train de développer une application Web pour mobiles. Je suis allé avec des applications web parce que pour moi, il semble une situation gagnante avoir à développer une application qui pourrait fonctionner aussi sur iPhone/ Windows Mobile/Palm, etc.Application Web Android: Position: fixe cassé?

je commencé à tester aujourd'hui après quelques jours de faire des concepts, idées et dessins et ce que je voulais faire était d'avoir un menu qui se fige au en bas de la page. Exactement comme le menu sur le fond dans cette capture d'écran de l'application iPhone :

enter image description here

en utilisant le CSS, je pensais que ce serait vraiment facile de le faire. Utilisant uniquement la position : fixe; en bas: 0; aurait fait l'affaire mais je l'ai trouvé il ne se comporte pas le même 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. Divs défilables ne fonctionnent pas non plus sur Android. J'ai également essayé d'utiliser des cadres sans aucune chance non plus. Est-ce que quelqu'un sait de toute façon recréer un menu qui collerait au bas d'une page pour les téléphones mobiles?

Source

2010-05-06 StevenGilligan

Vous avez dit que vous publieriez si l'une des solutions fonctionnait - J'ai un problème similaire et je voudrais savoir quelle option essayer - merci! –

Moi aussi. Merci. –

Sur mon Android N1 avec CyanogenMod j'ai eu ce mal aussi, et le correctif:

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

Plus précisément la partie user-scalable=no;, vous pouvez aussi mettre 0 au lieu de no.

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

Source

2010-10-13 21:09:06 rizzle

Je peux confirmer que cela fonctionne avec Android. – Xavier

J'ai eu beaucoup de problèmes sur de nombreux périphériques en utilisant user-scalable = non. En utilisant ceci, j'ai remarqué que les boîtes de sélection deviennent complètement inutilisables. – stephenmuss

Notez que la syntaxe correcte de l'attribut de contenu méta viewport utilise une virgule pour séparer les valeurs et non un point-virgule. – drzax

Ce système est censé fonctionner :) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Source

2010-06-17 16:47:54 Lyon

C'était vraiment super cool, et ça corrige, mais la vache sacrée c'est difficile. – rizzle

Il ne fonctionne pas en mode portrait – Volatil3

a une juste mise à jour Android 2.2 (Froyo) sur mon HTC Desire, et je suis heureux de dire que la position fixe fonctionne à présent, au moins lorsque vous utilisez la balise meta de viewport pour définir l'échelle initiale et la largeur. Cependant, cela ne semble pas fonctionner sur les pages Web normales.

Source

2010-08-17 11:25:06

Il suffit d'ajouter:

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

à 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: When can I use CSS position:fixed?

Source

2012-05-21 05:50:32 kad81

Notez que cela empêchera les utilisateurs de pouvoir zoomer/dézoomer sur la page (ce qui, d'après l'apparence de votre question, devrait être souhaitée de toute façon). – kad81

Je confirme que l'utilisation du nom méta dans votre tête html

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

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

Source

2012-07-17 11:10:39

lien brisé et pas de solution utile – Adaptabi

Application Web Android: Position: fixe cassé?

Répondre

Questions connexes