iOS设备上键盘弹出后，PhoneGap页面向上滚动导致页面损坏。

Question

我正在尝试使用PhoneGap开发iOS设备的聊天应用程序。该应用程序具有显示已登录用户的标题，用户可以在页脚中编写文本消息，并且放置在主体中的列表视图将显示消息。

我升级到了最新版本的JQueryMobile（1.3.0），但问题仍然出现在应用程序内部。我已经附上了一个快照，显示了布局如何变得损坏。（http://i.stack.imgur.com/RsLfT.png）

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

是否有人有想法如何解决这个问题？（例如软键盘出现后刷新）

- a.karkar

Answer 1

为了临时解决这个问题（因为当键盘显示时会出现断裂），您可以在配置文件（config.xml）中设置"KeyboardShrinksView"为"true"，或者添加以下内容：

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

  <plugins>...

- a.karkar

---

这又是一年后的遗留问题：https://dev59.com/Q3zaa4cB1Zd3GeqPP26L - commonpike

Answer 2

我使用Twitter Bootstrap 3时遇到了同样的问题。添加以下内容：

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

解决了我的问题。

- joshua

Answer 3

目前您可以添加：

document.body.scrollTop = 0;

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

- zgosalvez

---

谢谢zejesago，我之前尝试过这个解决方案，但是页面会上下移动，对用户来说很烦人。 - a.karkar

@zejesago，太棒了……谢谢伙计。我为此努力了很久，你的解决方案起作用了！给你点赞！ - Sushant

@zejesago，当键盘打开时，我们能否固定标题？这是我的问题，并附有截图[链接]（http://stackoverflow.com/questions/24378587/iphone-keyboard-pushes-page-up-in-phonegap） - Sushant

@Sushant 我不确定。已经有一段时间没有在项目中使用PhoneGap了。我目前转向原生开发了。 :) - zgosalvez

@zejesago，我在混合框架中遇到的问题，让我开始认真考虑转向本地开发了！！ - Sushant

Answer 4

键盘弹出时屏幕高度会改变

当键盘弹出时，cordova/phonegap应用程序的屏幕高度或window.innerHeight值会减少，这会重新调整内容并使您的屏幕看起来损坏。

使用Javascript，在deviceready或应用程序initialize中将设备屏幕高度设置为您的包装器/容器元素。

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

- Anulal S

Answer 5

我已经联系了PhoneGap支持，他们告诉我在PhoneGap 2.6版本中预计会对这个问题进行适当的修复。

- a.karkar

---

据我所知，问题在于当键盘出现时，页面是可滚动的，并且在页面末尾附加了额外的空间（约40像素高度）。如果是这样，那么它仍然存在于PG 3.0中 :( - Tien Do

Answer 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;
  }
}

- Steeve17

---

你好，Steeve。我尝试了你的解决方案，有时它可以修复布局问题，但问题仍然会出现（在使用PhoneGap 2.5进行测试）。 - a.karkar

在我的情况下，它已经完全固定了，因为没有任何东西依赖于窗口高度，一切都与容器有关。毫无疑问，这是一个本地的错误，但目前没有其他解决方案。 - Steeve17