使用JavaScript判断手机的横竖屏

横竖屏的需求由来

横竖屏问题主要来源于移动端 iPhone、Android、以及 iPad这些设备中。有时候，我们的前端网页不仅要求在竖屏的情况下能够完美的展示，而且要求我们在横屏的情况下也有不错的网页展示效果。为了达到这个需求，就要求我们在不同情况下（横屏、竖屏）进行界面适配，通常是样式适配。

横竖屏事件

移动端的横竖屏事件是 orientationchange 事件。

一般的使用方式是：

window.addEventListener("orientationchange",function(){
    //相关处理
})

横竖屏的判断

window.orientation 是判断横屏竖屏的依据。
其对应的值是：
ipad： 90 或 -90 横屏
ipad： 0 或180 竖屏
Andriod 、ios：0 或180 横屏
Andriod、ios： 90 或 -90 竖屏

在pc端网页中，window.orientation 的值是undefined，因为pc端没有横竖屏的说法。

横竖屏的一个小示例

这是一个根据转屏，背景色黑白变化的示例

function orient(){
    var oBox = document.getElementById("box");
    if(window.orientation==0||window.orientation ==180){
        oBox.style.background = '#000000';
    }else{
        oBox.style.background = '#ffffff';
    }


}
//页面初次加载
window.onload = function(){
    orient();
}
//页面添加转屏事件          window.addEventListener('orientationchange',function(){
    orient()
});
//浏览器变化
window.onresize = function(){
    orient()
};