软键盘弹出顶起影响页面布局

参考文章：https://blog.csdn.net/Jioho_chen/article/details/83189266

情况1

在页面中用了position: fixed; bottom: 0;。把元素定位在页面的底部，可是这时候键盘弹起后，该定位元素也会跟着键盘一起弹起。网上大多数答案是：修改文档的排版，改为用absoult，或者监听页面高度变化等方法，在这种情况中亲测无效！

var winHeight = $(window).height();

$(window).resize(function() {

    var thisHeight = $(this).height();

    var keyboardHeight = thisHeight - winHeight;

    $(".需要定位的class名/ id").css({ 'bottom': keyboardHeight + 'px' });

});

情况2

在CSS中使用背景图或者文档中的元素，高度都用了百分比作为高度单位。譬如：（width: 100%; height: 100%; background-image: url('pic.png');），在键盘弹起后，背景图 / 文档内容被压缩。（注意，这种和上面的情况又不一样，网上大多数的解决方法都是针对这种情况的）

解决方法：

在JQ或者JS中，加入以下代码片段（监听页面高度发生变化，为body自定义高度，不要使用100%），解决方法很多，我觉得这种的代码最少：

var winHeight = $(window).height(); //获取当前页面高度

    $("body").height(winHeight);