移动端解决fixed和input弹出虚拟键盘时样式错位

最近在项目中遇到一个坑，移动端中一个页脚写了fixed属性，在input输入弹出虚拟键盘时，这个fixed错位了。各种搜索，各种烦后来才解决。这里和大家一起分享下。

首先说下坑，其实移动端是不建议使用fixed属性的，但是因为是填坑，不用这个属性很多东西要重写，而且正好最近也学点东西，就只要硬着头皮保留了。

下面说下思路：因为是输入的时候出现的问题，可以在输入时改变fixed属性为static,于是用到focus事件。

$('#telephone').bind("focus",function(){
   $(".div_ft").css({"position":"static","bottom":0}); 
}).bind("blur",function(){
  $(".div_ft").css("position","fixed");
});

　　然后发现在屏幕翻转的时候还是不行，于是还要加入屏幕翻转监听事件。

    // 判断屏幕是否旋转
    $(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;
        }
    });

　　

转载于:https://www.cnblogs.com/cm1236/p/5510004.html