博客

今天在做移动端的时候遇到，页面使用绝对定位或百分比，vh、vh来布局时软键盘压缩页面的问题，百度了几个方法，特此记录一下。套壳上架的话可以禁用横屏，避免视口改变触发事件

1.判断window.onresize前后大小，间接判断软键盘弹出，在对页面布局做处理，如改变position或设置容易大小为定值
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function () {
    var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight > nowClientHeight) {
        //键盘弹出的事件处理
    }
    else {
        //键盘收起的事件处理
    }
};

2.刚进就获取到初始视口大小，然后存到localStorage或其他本地存储里，然后设置成最外层容器大小，然后内部就可以用百分比设置布局了。

$(‘body’).height($(‘body’)[0].clientHeight);

3.直接使用px、rem或者flex来布局。