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

【问题标题】：PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted在 iOS 设备中出现键盘后，PhoneGap 页面向上滚动，导致 PhoneGap 页面损坏
【发布时间】：2013-02-21 11:06:59
【问题描述】：

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

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

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

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

【问题讨论】：

标签： iphone ios cordova layout iphone-softkeyboard

【解决方案1】：

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

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

  <plugins>...

【讨论】：

..一年后又是遗产：stackoverflow.com/questions/21739396/…

【解决方案2】：

现在你可以添加一个：

document.body.scrollTop = 0;

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

【讨论】：

感谢 zejesago，我之前尝试过这个解决方案，但页面会出现上下移动，这对用户来说很烦人
@zejesago，它有效....谢谢哥们。我正在努力让这个你的解决方案奏效！！！为你 +1！
@zejesago，我们可以在键盘打开时修复标题吗？这是我的截图问题link
@Sushant 我不确定。已经有一段时间了，因为我在一个项目中使用了PhoneGap。我目前已经成为本地人。 :)
@zejesago，我在混合框架中遇到的那种问题，甚至我现在都在强烈考虑转向原生！

【解决方案3】：

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

添加：

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

为我解决了问题。

【讨论】：

【解决方案4】：

我已联系 PhoneGap 支持，他们告知预计将在 PhoneGap 2.6 版本中针对此问题进行适当修复

【讨论】：

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

【解决方案5】：

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

【讨论】：

你好 steeve，我尝试了你的解决方案，有时它正在修复布局但问题仍然出现（使用 PhoneGap 2.5 测试）
在我的情况下，它已经完全修复，因为没有任何东西依赖于窗口高度，它完全与容器有关。毫无疑问，这是一个原生错误，但 atm 没有其他解决方案。

【解决方案6】：

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

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

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

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

【讨论】：