PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted

Question

I am trying to develop a chatting application using PhoneGap for iOS devices. The application has a header that shows the logged user, a footer where user can write his text

Answer 1

I fixed it using css and a wrapper

/*Phone < 5:*/
 @media screen and (device-aspect-ratio: 2/3) {
  .content {
   height: 416px !important;
 }
}

 /*iPhone 5:*/
@media screen and (device-aspect-ratio: 40/71) {
  .content {
    height: 504px !important;
  }
}

Answer 2

I was having the same issue using twitter bootstrap 3.

Adding:

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

Solved the problem for me.

Answer 3

Screen Height changes when keyboard pops up

The cordova/phonegap application screen height or window.innerHeight value is getting reduced when the keyboard pops up, this re-sizes the contents inside & makes your screen look corrupted.

Using Javascript, On deviceready or Application initialize set the device screen height to your wrapper/container element.

 $('#container').height(window.innerHeight);  // jQuery 

Answer 4

I have contacted PhoneGap Support and they informed that a proper fix is expected to be done in PhoneGap 2.6 release concerning this issue

Answer 5

In order to fix this Issue temporarily (because it shows breaks while keyboard is showing), you can set "KeyboardShrinksView" to "true" in your configuration file (config.xml) or add it:

<widget>
  ...
  <preference name="KeyboardShrinksView" value="true" />

  <plugins>...

Answer 6

For now you can add a:

document.body.scrollTop = 0;

whenever the input field recieves a blur event.