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 t

Answer 1

Just add:

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

to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?

Answer 2

I confirm that using the meta name in your html header

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

you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up and iOS 4 and up. I made an example here: https://dl.dropbox.com/u/908148/website/test-scroll.html

Answer 3

Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.

Answer 4

This is supposed to work :) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 5

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.