android开发分享虚拟键盘处于活动状态时的屏幕样式

我不确定，这是预期的效果吗？ 检查这个链接

更新

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

检入设备浏览器 –

代码： –

（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; } } 

这个组合可以让你在键盘启动的时候，在手机上风格化页面。 谢谢。