移動端解決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;
        }
    });