html5 手机开发 区分横屏和竖屏， 在CSS方法与js方法

css@L_673_0@（1）

//竖屏
Css代码 
@media screen and (orientation:porTrait) {
    div {
        BACkground-color:red;
    }
}
//横屏
Css代码 
@media screen and (orientation:landscapE) {  
    div {  
        BACkground-color:red;  
    }  
} 

css@L_673_0@（2）

<link rel="stylesheet" media="all and (orientation:porTrait)" href="porTrait.css">
<link rel="stylesheet" media="all and (orientation:landscapE)" href="landscape.css">

js@L_673_0@（1）

(function(){
    var init = function(){
        var updateOrientation = function(){
            var orientation = window.orientation;
            switch(orientation){
                case 90:
                case -90:
                    orientation = 'landscape'; //这里是横屏
                    break;
                default:
                    orientation = 'porTrait';  //这里是竖屏
                    break;
            }

            //html根据不同的旋转状态，加上不同的class，横屏加上landscape，竖屏
            //加上porTrait
            document.body.parentNode.setAttribute('class',orientation);
        };

        // 每次旋转，调用这个事件。
        window.addEventListener('orientationchange',updateOrientation,falsE);

        // 事件的初始化
        updateOrientation();
    };

    window.addEventListener('DOMContentLoaded',init,falsE);
})();

js@L_673_0@（2）

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",function() {
        if (window.orientation === 180 || window.orientation === 0) { 
            alert('竖屏状态！');
        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            alert('横屏状态！');
        }  
    },falsE); 
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。