Aplicación web para Android: ¿Posición: fija rota?

Question

Estoy en el proceso de desarrollo de una aplicación web para móviles. Me fui con aplicaciones web debido a mi me parece una situación ganadora tener que desarrollar una aplicación que podría funcionar también en el iPhone/ Windows Mobile/palma etc.

empecé a prueba hoy después de unos días de hacer conceptos, ideas y diseños y lo que quería hacer era tener un menú que se pega en el parte inferior de la página. Exactamente igual que el menú en la parte inferior de esta aplicación iPhone pantalla:

el uso de CSS, pensé que sería muy fácil de hacer esto. Solo usando la posición : fijo; abajo: 0; habría hecho el truco pero he encontrado no se comporta de la misma en los navegadores móviles

he tratado de dividir mi página en 2 secciones: 1 sería un div desplazable (para el contenido) y el otro sería el menú inferior. Los divs desplazables tampoco funcionan en Android. También intenté usar marcos sin suerte. ¿Alguien sabe de alguna forma de volver a crear un menú que se pegue al final de una página para teléfonos móviles?

Answer 1

En mi N1 Android con CyanogenMod tuve este problema también y la revisión:

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

Específicamente la parte user-scalable=no;, también se puede poner en lugar de 0no.

Curiosamente, esto interrumpe la prestación androides de botones, pero todo lo que tiene que hacer es establecer un color de fondo para los botones.

Answer 2

Esto se supone que funciona :) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 3

Sólo consiguió una actualización a Android 2.2 (Froyo) en mi HTC Desire, y estoy feliz de decir que ahora trabaja posición fija, al menos cuando se utiliza la metaetiqueta de la ventana gráfica para establecer la escala inicial y el ancho. Sin embargo, parece que no funciona en páginas web regulares.

Answer 4

Sólo añadir:

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

a la página y ya está listo para Android 2.2 +. Esto funcionó en una página que estaba probando en mi teléfono. Fuente: When can I use CSS position:fixed?

Answer 5

que confirmar que utilizando el nombre de meta en el encabezado HTML

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

que tendrá un div fija en el desplazamiento vertical y horizontal en Android 2.2, 2.3 y hasta y el IOS 4 y hasta . Hice un ejemplo aquí: https://dl.dropbox.com/u/908148/website/test-scroll.html