PhoneGap页面在iOS设备中出现键盘后向上滚动，导致PhoneGap页面损坏

Question

我正在尝试使用PhoneGap为iOS设备开发一个聊天应用程序。该应用程序有一个显示登录用户的页眉，一个用户可以在其中编写文本消息的页脚，以及一个位于正文中的列表视图，该视图将显示消息。

我更新到了JQueryMobile的最新版本（1.3.0），但问题仍然出现在应用程序中。我附上了一张快照，显示布局是如何损坏的。(https://i.stack.imgur.com/RsLfT.png)

我尝试了几种解决方案，如使页面不可滚动（将UIWebViewBounce设置为false）和不可伸缩（用户可伸缩=否）以及其他用户界面更改，但问题没有解决。

有人知道怎么解决这个问题吗？（就像软键盘出现后的刷新）

---

Answer 1

为了暂时解决此问题（因为它在显示键盘时显示中断），您可以在配置文件（config.xml）中将"KeyboardShrinksView"设置为"true"或添加它：

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

Answer 2

现在您可以添加一个：

document.body.scrollTop = 0;

每当输入字段接收到模糊事件时。

Answer 3

我在使用twitter bootstrap 3时遇到了同样的问题。

添加：

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

为我解决了这个问题。

Answer 4

我已经联系了PhoneGap支持，他们通知我们，在PhoneGap2.6版本中，预计会对此问题进行适当的修复

我使用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;
  }
}

键盘弹出时屏幕高度发生变化

当键盘弹出时，cordova/phonegap应用程序的屏幕高度或window.innerHeight值正在减小，这将重新调整&使您的屏幕看起来已损坏。

使用Javascript，On deviceready或Application initialize将设备屏幕高度设置为包装器/容器元素。

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