在理想情况下，我想整个界面有一个自定义样式这被认为是在IOS（iTouch的/ iPad的）或Android等效采用虚拟键盘present。请参阅下面的更多细节。

一组自定义的CSS黑客规则被激活，当键盘是present，也是一个可以接受的解决方案。

目标既机器人和iOS，在网站（HTML / JavaScript的/ CSS） 还要注意的是里面的布置是：流体

编辑：这是更多的设计，那么文本;因此变化并不令人迷惑。在最底层，我只是希望有一个设计变更使用或不使用虚拟按键（也许只是一个背景变化）。

的问题上，这是一个好或坏的设计理念，是值得商榷的。不过，我觉得是不相关的问题。对于这样一个漏洞可以使用更多的则文本（如游戏或互动媒体）。

因此，赏金：尽管不再需要为我的工作项目上的答案（另一种设计是使用）。我仍然相信这个问题可以被回答中受益。

默认行为

  + -------- +
                       | |
+ ------------ + +  -  +  - 隐藏 -  +  -  +＆LT;  - 〜50％隐藏
| + -------- + | | + -------- + |
| | | | | |可见| |
| | | | \ | | | | ＆所述;  - 〜50％可见光
| | 100％| | ==＆GT; | + -------- + |
| | | | / | |虚拟| |
| | | | | |键| |
| + -------- + | | + -------- + |
+ ------------ + ------------ +
 

期望的行为

  + ------------ + ------------ +
| + -------- + | | + -------- + |
| | | | | |可见| | ＆LT;  -  100％可见的（例如样式）
| | | | \ | | | |自定义样式
| | 100％| | ==＆GT; | + -------- + |
| | | | / | |虚拟| |
| | | | | |键| |
| + -------- + | | + -------- + |
+ ------------ + ------------ +
 

解决方案

我不知道，这是预期的效果？检查此链接

http://jsfiddle.net/UHdCw/3/

更新

（1）。假设其网站和放大器;在设备浏览器中运行。然后，我们可以通过检查屏幕尺寸检查虚拟键盘的presence。

入住设备浏览器 - http://jsfiddle.net/UHdCw/8/show/

code： - http://jsfiddle.net/UHdCw/8/

（2）。如果您正在与HTML5和功放机应用程序; PhoneGap的，事情会有所不同。由于没有直接的API钩子来检查时，键盘的状态，我们必须写我们的自己的插件在PhoneGap的。

在Android中，你可以通过使用本机code [检查键盘的显示/隐藏状态点击这里。并有写PhoneGap的插件来获得这些事件在我们的HTML。

[PhoneGap的就是一个例子。我想大多数的HTML原生框架有这种幸福的挂钩与本地code]

的iOS更新

正如你所说的有高度/位置没有变化时，键盘是present。我们可以做的一件事，当输入获得焦点，我们可以添加的收缩类，并降低元件尺寸。请检查下面的链接。

http://jsfiddle.net/UHdCw/28/show/

Ideally, i would want the entire interface to have a custom styling that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details.

A custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.

Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside is: "fluid".

Edit: This was more design, then text; So the changes are not disorientating. At the lowest level, I just desire a design change with and without the virtual keys (Perhaps just a background change).

The question on which, this is a good or bad design idea, is debatable. However, I feel is irrelevant to the question. For such an exploit can have uses more then text (such as games, or interactive media).

Hence the bounty: Despite no longer needing the answer for the project I was working on (an alternative design was used). I still believe this question can benefit from being answered.

Default Behavior

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

Desired Behavior

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

I'm not sure, is this the desired effect?. check this link

http://jsfiddle.net/UHdCw/3/

Update

(1). Assuming its a website & running on device browser. Then we can check the presence of virtual keyboard by checking the screen size.

Check in device browser - http://jsfiddle.net/UHdCw/8/show/

code : - http://jsfiddle.net/UHdCw/8/

(2). If you are building native app with HTML5 & Phonegap, things will be different. Since there is no direct API hook to check the keybord status, we have to write our own plugin in Phonegap.

In Android you can check show/hide status of keyboard by using native code [check here]. and have to write Phonegap plugin to get those events in our HTML.

[Phonegap is an example. I think most of the html to native frameworks have this kind of felicity to hook with native code ]

iOS update

As you said there is no change in height/position when keyboard is present. We can do one thing, when input gets the focus we can add shrink class and reduce the element sizes. Check following link.

http://jsfiddle.net/UHdCw/28/show/