键盘在 Phonegap 中调整 webview 的大小并破坏 css 布局答案

【问题标题】：Keyboard resizes webview in Phonegap and destroys css layout键盘在 Phonegap 中调整 webview 的大小并破坏 css 布局
【发布时间】：2015-09-27 18:39:08
【问题描述】：

大约一个星期以来，我一直在努力寻找解决问题的方法，但仍然找不到。到目前为止，我没有找到任何东西，我几乎搜索了所有东西。我的问题是我使用Phonegap Build制作了一个应用程序，其中我有一个输入字段和一些按钮、div等，它们是用jquery、bootstrap和纯css中的百分比制作的。当我按下输入字段以写入内容时，屏幕会调整大小并使它们变小。这是一个例子：

-这是正常形状的应用程序：

-这是键盘调整屏幕大小和按钮和标题变小的方式：

-这是我想要的样子：

唯一有效的是<preference name="fullscreen" value="true" />，但我不希望应用全屏显示。我正在为 iOS、Android 和 Windows 手机构建应用程序。任何帮助将不胜感激。提前致谢。

【问题讨论】：

以下解决方案对您有帮助吗？

标签： android jquery ios cordova phonegap-build

【解决方案1】：

您不应该以百分比给出高度。给你的标题一个固定的高度（以像素为单位，例如 60 像素）。我想看看你页面的html和css（主要是布局）。

【讨论】：

【解决方案2】：

@Asdalud，
我完全不同意桑迪普。使用 PX 而不是百分比，会使应用程序遭受未来错误和the 1024px problem。我也想看看 HTML 和 CSS。

但是，根据您对问题的描述，我想说您对 CSS 的了解不够。您需要决定是要解决问题还是要了解有关 CSS 的更多信息。

我的随机猜测是您没有处理psuedo-classes。根据您的描述，我看到 focus 事件未被您的 CSS 覆盖。

修复

让引导程序处理您的所有 CSS。放弃所有，即使不是大部分 CSS。
或
了解有关 CSS 的更多信息。（谷歌：css pseudo classes focus）

祝你好运

【讨论】：

【解决方案3】：

首先你应该在 css 中将你的圆圈设置为绝对位置：

.circle-class {
  position:absolute; 
  bottom:10px;
}

这里有两个解决方案。

1.有一个键盘插件here你要打电话

Keyboard.shrinkView(false);

2.您可以使用here的解决方案并在config.xml中设置一些参数：

<preference name="android-windowSoftInputMode" value="statePan" />

index.html 中的元标记应为：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

希望对您有所帮助。

【讨论】：

OP 已将问题标记为 Phonegap Build。您可能需要就如何将元素添加到 config.xml 提供额外帮助 - 因为 AndroidManifest.xml 不适用于 Phonegap Build。
@JesseMonroy650：谢谢你的提示。我确实更新了解决方案。