Android Web App : Position:fixed broken?

Question

I'm in the process of developping a Web Application for mobiles. I went with web applications because to me it seems a winning situation having to develop one application that could run also on iPhone / Windows Mobile / Palm etc.

I started testing today after a few days of doing concepts, ideas and designs and what I wanted to do was have a menu that sticks at the bottom of the page. Exactly like the menu on the bottom in this iPhone application screenshot :

Using CSS, I though it would be really easy to do this. Only using position:fixed; bottom:0; would have done the trick but I have found it doesn't behave the same on mobile browsers

I tried to split my page in 2 sections : 1 would be a scrollable div (for the content) and the other one would be the bottom menu. Scrollable divs also do not work on Android. I also tried using frames with no luck either. Does anyone know of any way to re-create a menu that would stick to the bottom of a page for mobile phones?

Answer 1

On my Android N1 with CyanogenMod i had this trouble too and the fix:

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

Specifically the user-scalable=no; part, you can also put 0 instead of no.

Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.