判断手机旋转代码 屏幕旋转的事件和样式

屏幕旋转的事件和样式

 

事件

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

 

 

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);

 

 

 

样式

 

 

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}
 
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}