H5移動端橫豎屏切換監聽

上一次說過了 H5移動端橫豎屏切換監聽的寫法。

橫豎屏監聽程式碼如下，這裡就不做詳細說明了。完整說明

$(function(){//監聽橫豎屏旋轉，ios 和 Android 寫法不一樣  
    onResize();  
    if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {  
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", onResize, false
 
);  
    }else{  
        window.addEventListener( "resize", onResize, false);  
    }  
});  

function  onResize() {  

    if(Utils.isPortrait()){  
        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){  

            var timer = setTimeout(function(){  
                portrait();//豎屏時執行的函式  
 


                clearTimeout(timer);  
            },100);  
        }else{  
            portrait();  
        }  
    } else {  
        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){  
            var timer = setTimeout(function(){  
                landscape();//橫屏時執行的函式  
                clearTimeout(timer);  
            },100
 
);  
        }else{  
            landscape();  
        }  
    }  
}  

現在說說在有橫豎屏監聽時，同時還有input 輸入框。
頁面在輸入時 容易的問題，如圖

問題

圖1 ios 系統輸入時

圖2 正常橫屏時的提示

圖3 Android 輸入時顯示的頁面

如圖所示，android 系統點選input 輸入框時，整個輸入框是佔據螢幕空間的，因此頁面會向上壓縮，導致了監聽的橫豎屏的結果為橫屏狀態，出現了頁面提示，導致無法輸入，影響頁面效果。

解決方法

在input 聚焦時，對於非ios 系統的裝置，移除當前頁面的橫豎屏監聽。可能還有其他更好的方法，後續有待研究…

$('input').focus(function(){
        if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { 
        }else{
            window.removeEventListener("resize",onResize,false);
        }
});