Home » Android » html – Android Web App : Position:fixed broken?

html – Android Web App : Position:fixed broken?

Posted by: admin April 23, 2020 Leave a comment

Questions:

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 :

enter image description here

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?

How to&Answers:

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.

Answer:

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:

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

Answer:

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:

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