解决移动端position:fixed受虚拟键盘影响的问题

方法一:监听改变浏览器窗口高度的时候去触发事件

 windowInnerHeight = window.innerHeight; //获取当前浏览器窗口高度
    $(window).resize(function(){
        if(window.innerHeight < windowInnerHeight){
            $('.footer').removeClass('footerss');
        }else{
        $('.footer').addClass('footerss');
        }

方法二:当输入框获得焦点时,重新修改按钮样式:{position,'static'},当输入框获得焦点时,样式恢复

$(输入框).bind('focus',function(){        
    $('按钮').css('position','static');    
}).bind('blur',function(){        
    $('按钮').css({'position':'fixed','bottom':'0'});    
});
// 判断屏幕是否旋转
$(window).bind("onorientationchange",function(){
    switch(window.orientation) {
        case 0:
            $('.weui-foter').css({'position':'fixed','bottom':'0'});
            break;
        case -90:
            $('.weui-foter').css({'position':'static'});
            break;
        case 90:
            $('.weui-foter').css({'position':'static'});
            break;
        case 180:
            $('.weui-foter').css({'position':'fixed','bottom':'0'});
            break;
    }
});

猜你喜欢

转载自www.cnblogs.com/zwtqf/p/9750486.html