虚拟键盘处于活动状态时的屏幕样式

Question

理想情况下，我希望整个界面具有 自定义样式 ，该 样式 可以在ios（itouch /
ipad）或具有等效虚拟键盘的android上看到。请参阅下面的更多细节。

当键盘“存在”时，自定义设置的CSS hacking规则处于活动状态也是一种可以接受的解决方案。

在网站（HTML / JavaScript / CSS）上同时定位android和ios。还请注意，内部布局为： “ fluid”。

编辑： 这是更多的设计，然后是文字；因此，变化不会使人迷惑。在最低级别，我只希望有和没有虚拟键的设计更改 （也许只是背景更改）。

这是一个好坏设计思想的问题尚待商.。 但是，我觉得这个问题无关紧要。对于此类攻击，可以使用更多的文字（例如游戏或交互式媒体）。

因此赏金： 尽管不再需要我正在从事的项目的答案（使用了替代设计）。我仍然相信这个问题可以从回答中受益。

默认行为

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

期望的行为

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Answer 1

我不确定，这是否是理想的效果？检查此链接

更新资料

（1）。假设它是一个网站并在设备浏览器上运行。然后，我们可以通过检查屏幕尺寸来检查虚拟键盘的存在。

签入设备浏览器

（2）。如果您使用HTML5和Phonegap构建本机应用程序，则情况将有所不同。由于没有直接的API挂钩来检查键盘状态，因此我们必须在Phonegap中编写自己的插件。

在Android中，您可以使用本机代码键盘的显示/隐藏状态。并且必须编写Phonegap插件才能在HTML中获取这些事件。

[Phonegap是一个例子。我认为大多数html到本机框架都具有这种与本机代码挂钩的特性]

iOS更新

正如您所说，使用键盘时，高度/位置没有变化。我们可以做一件事，当输入获得焦点时，我们可以添加缩小类并减小元素大小。检查以下链接。