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

Question

我一直在努力为我的问题找到一个解决方案大约一个星期，但仍然无法找到它。直到现在我才发现任何东西，我几乎搜索了所有东西。我的问题是我使用Phonegap Build创建了一个应用程序，其中我有一个输入字段和一些按钮，div等，它们是用jquery，bootstrap和pure css中的百分比构成的。当我按下输入字段以写入某些内容时，屏幕会调整大小并使其变小。这是一个例子：

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

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

- 我希望它看起来如何：

唯一可行的是<preference name="fullscreen" value="true" />，但我不希望应用程序全屏显示。我正在推动iOS，Android和Windows Phone的应用程序。任何帮助将受到高度赞赏。提前谢谢。

Answer 1

你不应该以百分比给出高度。将标题设置为固定高度（以px表示，例如60px）。我想看看你的页面的html和css（主要是布局）。

Answer 2

@Asdalud，
我完全不同意Sandeep。使用PX而不是百分比使应用程序受到未来错误the 1024px problem的影响。我还想看看HTML和CSS。

但是，我从你对问题的描述中我会说你对CSS知之甚少。您需要决定是否要解决问题或了解有关CSS的更多信息。

我的随机猜测是你不处理psuedo-classes。根据您的描述，我发现您的CSS 焦点事件未涵盖。

要修复

• 让bootstrap处理你所有的CSS。并放弃所有，如果不是你的大部分CSS。
• 或
• 了解有关CSS的更多信息。 （Google：css pseudo classes focus）

最好的运气

Answer 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" />

希望有所帮助。