移动虚拟键盘使html机身高度100％有线

Question

我正在制作移动页面，所有布局都按百分比设计。 布局中的所有组件都取决于主体宽度，高度。

当虚拟键盘不存在时，没有任何问题。 但是当虚拟键盘出现时，这就是问题所在。 我认为一张图片胜过千言万语。

这不应该发生！ 任何人都可以知道忽略虚拟键盘区域的方法吗？ 或建议替代方式？

这是拟合高度100％的代码。 我使用此代码而不是css或viewport device-height的原因是 那个css高度：100％，视口设备高度永远不会工作。

$( window ).resize(function() {
    var bodyWidth = $('html').width();
    var bodyHeight = $('html').height();  
    $('body').css("height", bodyHeight);
}