当移动端软键盘弹出时错位问题解决方案

        //软键盘弹出时设定高度百分比错位     

  $('body').height($('body')[0].clientHeight);

       //软键盘弹出时fixed错位

  window.alert = function (msg) {//fixed定位与键盘冲突
        $('body').append('<div>' + msg + '</div>')
  };//因为使用alert,fixed无法恢复,要屏蔽alert。
        $('div').bind("focus",function(){
            $(".bottom").css({"position":"static","bottom":0});
        }).bind("blur",function(){
            $(".bottom").css("position","fixed");
        });

      //解决横屏错位问题     

$(window).bind("onorientationchange",function(){
            switch(window.orientation) {
                case 0:
                    $('.bottom').css({'position':'fixed','bottom':'0'});
                    break;
                case -90:
                    $('.bottom').css({'position':'static'});
                    break;
                case 90:
                    $('.bottom').css({'position':'static'});
                    break;
                case 180:
                    $('.bottom').css({'position':'fixed','bottom':'0'});
                    break;
            }
        });

发布了32 篇原创文章 · 获赞 11 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/jinxi1112/article/details/52494616