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

css方法（1）

//竖屏
Css代码 
@media screen and (orientation:portrait) {
    div {
        background-color:red;
    }
}
//横屏
Css代码 
@media screen and (orientation:landscape) {  
    div {  
        background-color:red;  
    }  
} 

css方法（2）

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

js方法（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方法（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这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。