Geek asks and answers

The PhoneGap page scrolls up after the keyboard appears on iOS devices, resulting in damage to the PhoneGap page

I am trying to create a chat application using PhoneGap for iOS devices. The application has a header that shows the registered user, a footer in which the user can write his text message, and a list view placed in the body that will display the message.

I updated to the latest version of JQueryMobile (1.3.0), but the problem still appears inside the application. I have attached a snapshot showing how the layout becomes damaged. ( http://i.stack.imgur.com/RsLfT.png )

I tried several solutions, for example, to scroll the page (set UIWebViewBounce to false) and not to scale (user-scalable = no) and other changes to the user interface, but the problem has not been solved.

Does anyone have an idea how to fix this? (e.g. update after soft keyboard appears)

+5
source share
6 answers

To temporarily fix this problem (since it shows gaps when the keyboard is shown), you can set "KeyboardShrinksView" to "true" in the configuration file (config.xml) or add it:

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

  <plugins>...
+3
source

Now you can add:

document.body.scrollTop = 0;

when the input field receives a blur event.

+2
source

, 3.

:

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

.

+2

PhoneGap, , PhoneGap 2.6 .

+1

css

/*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;
  }
}
+1

"/ " window.innerHeight , , .

Using Javascript, On, devicereadyor Application initializesets the device screen height for your shell / container element.

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

More articles:


All Articles