2

I have a jquery mobile page in which I have a textbox. On clicking on the textbox the the virtual keyboard appears on the phone screen.

The problem starts here. If I run the page in android 2.3.3, the footer on my page comes up as the keyboard appears. But this does not happen when i run my page on ICS. I know there is bug in android 2.3.3 related to fixed positioning of header amd footer(github link).

Is this problem beacuse of the same reason?

Please Help !! Thanks !!

Mak
  • 584
  • 1
  • 13
  • 33

3 Answers3

5

  1. Make sure to disable zooming in your app by adding this meta - tag to your head:

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

  2. Create your page with a footer as you would normally. Make sure NOT TO ADD data-position="fixed"

  3. Instead, add a class "fixedFooter" to the class attribute of the footer: class="fixedFooter"

  4. Create the class "fixedFooter" in your CSS(-file):

    .fixedFooter 
{
   position: fixed !important;
   left: 0px !important;
   right: 0px !important;
   bottom: 0px !important;
   z-index: 999 !important;
}
pstenstrm
  • 6,339
  • 5
  • 41
  • 62
fuqi
  • 66
  • 1
  • 2
1

If your code works on ICS and doesn't work in Android 2.3.x this is because 2.3.x bug in style="position:fixed;"

In your HTML head change meta to this:

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

This solves Android 2.3.x issues.

More info:
http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
http://bradfrostweb.com/blog/mobile/fixed-position/

Edit:
I don't recommend to change viewport for all devices. It can cause different behaviours like user can't make zoom, pinch etc. One should detect whether visitor uses a Gingerbread device and change viewport if user has Gingerbread. To check Android version you can use this:
Detecting Android Browser (from v. 1 to 2.3 firmware) in PHP

Community
  • 1
  • 1
trante
  • 33,518
  • 47
  • 192
  • 272
0

remove the "user-scalable=no" from the viewport and all works wel

explained @ http://wil.to/android-positioning/

worked like a charm on 2.2.2

Wladimir
  • 1