安卓手机端网页，开启输入法时页面内容被压缩的解决方法

在安卓手机端的网页中，打开输入框会使页面的整体内容压缩（可能因为我使用了百分比的布局）

而在iphone浏览网页时则不会出现这种问题。

对于这种情况需要添加部分js代码来防止页面的压缩。

var h1 = $('body').height();
var h2 = $('#upMenu').height();
var h3 = $('#main').height();
$(window).resize(function() {
    $('body').height(h1);
    $('#upMenu').height(h2);
    $('#main').height(h3);
    $('#main').css('top', h2);
});

我的页面是由upmenu和main两部分构成。

具体原理是当浏览器窗口大小发生变化时调用函数，让输入法打开后的页面的body高度等于输入法打开前的页面的body高度，

其他页面中的元素根据其定位方式去设置height或top、margin-top等样式即可。

转载于:https://www.cnblogs.com/syzdidi/p/9686575.html