虚拟键盘处于活动状态时的屏幕样式
理想情况下，我希望整个界面有一个自定义的样式 ，在虚拟键盘存在的ios（itouch / ipad）或android等价物上可见。 请参阅下面的更多细节。
当键盘“存在”时，一个自定义的CSS黑客行为规则被激活，也是一个可以接受的解决scheme。
在网站（HTML / JavaScript / CSS）上同时指定android和ios。另外注意里面的布局是： “fluid”。
编辑：这是更多的devise，然后文本; 所以这些改变不会让人迷失方向。 在最底层，我只是希望有和没有虚拟键的devise更改（也许只是背景变化）。
这是一个好的还是坏的devise理念，这个问题值得商榷。 但是，我觉得这个问题是无关紧要的。 对于这样的漏洞，可以使用更多的文本（如游戏或交互式媒体）。
因此，赏金：尽pipe不再需要我正在进行的项目（使用替代devise）的答案。 我仍然相信这个问题可以从回答中受益。
默认行为
+--------+ | | +------------+ +-+-hidden-+-+ <- ~50% hidden | +--------+ | | +--------+ | | | | | | |visible | | | | | | \ | | | | <- ~50% visible | | 100% | | ==> | +--------+ | | | | | / | |virtual | | | | | | | | keys | | | +--------+ | | +--------+ | +------------+ +------------+ 期望的行为
+------------+ +------------+ | +--------+ | | +--------+ | | | | | | |visible | | <- 100% visible (example styling) | | | | \ | | | | Custom Styling | | 100% | | ==> | +--------+ | | | | | / | |virtual | | | | | | | | keys | | | +--------+ | | +--------+ | +------------+ +------------+
我不确定，这是预期的效果吗？ 检查这个链接
更新
（1）。 假设它的网站在设备浏览器上运行。 然后我们可以通过检查屏幕大小来检查虚拟键盘的存在。
检入设备浏览器 – http://jsfiddle.net/UHdCw/8/show/
代码： – http://jsfiddle.net/UHdCw/8/
（2）。 如果您使用HTML5和Phonegap构build原生应用程序，情况会有所不同。 由于没有直接的API钩子检查keybord状态，我们必须在Phonegap中编写我们自己的插件 。
在Android中，您可以使用本机代码检查键盘的显示/隐藏状态[ 请点击此处 ]。 而且必须编写Phonegap插件才能在HTML中获取这些事件。
Phonegap就是一个例子。 我认为大部分的html原生框架都有这种用本地代码钩住的幸运]
iOS更新
正如你所说的，当键盘出现时，高度/位置没有变化。 我们可以做一件事情，当input获得焦点时，我们可以添加缩小类，并减less元素的大小。 检查以下链接。
我遇到了同样的问题，这对我有用：
<!-- Android Viewport height fix--> <script type="text/javascript"> var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile"); if(isAndroid) { document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">'); } </script>
当input元素具有focus时，JavaScript将JavaScript应用到主体 。
$("input, textarea").focus(function(){ $(document.body).addClass('when-keyboard-showing'); }); $("input, textarea").blur( function(){ $(document.body).removeClass('when-keyboard-showing'); });
然后使用@media查询来确定移动视图：
@media (max-width:550px) { body.keyboard-up .header { height:0; padding:0; } }
这个组合可以让你在键盘启动的时候，在手机上风格化页面。 谢谢。
