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

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

更新

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

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

代码：- http://jsfiddle.net/UHdCw/8/

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

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

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

iOS更新

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

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

我遇到了同样的问题，这对我有用：

<!-- 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> 

的JavaScript应用类的身体当输入元件focus。

$("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.when-keyboard-showing .header { height:0; padding:0; }
}

当键盘打开时，该组合可让您在移动设备上对页面进行风格化。谢谢你。

我有同样的问题。到目前为止，这是我的解决方案，如果有人可以在 Apple 上进行测试，我将不胜感激：http : //jsfiddle.net/mrcchehab/f2ytsu8z/show（查看源代码和所有内容：http : //jsfiddle.net/marchehab/f2ytsu8z )

我通过以下方式检测键盘是否关闭：加载时我计算一个变量“sumedges”，即 $(window).width() + $(window).height()。然后，在 $(window).resize() 的情况下，我比较：如果总和 $(window).width() + $(window).height() 变得小于“sumedges”，这意味着键盘是出去。这适用于 Android 上的 Chrome。您可以轻松调整此代码以执行任何您喜欢的操作。

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

使用 jQuery，我发现无法在您单击输入并弹出键盘时强制平滑过渡。但有可能欺骗系统：在小提琴中，我设置了一个假输入（蓝色）。当您单击它时，实际输入出现在我的显示（黄色）下方并被选中。这样，在 Android 上的 Chrome 上，这一切看起来都很顺利。再次，如果你们能测试，我将不胜感激。

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});

当键盘打开时，我使用一个简单的 CSS 媒体查询将活动输入移动到手机屏幕的顶部。像这样的准系统示例：

/* MOBILE KEYBOARD IS OPEN */
@media only screen and (max-width: 430px) and (max-height:400px){
    input:focus{
        position: fixed;
        top:50px;
    }
}