移动端屏幕旋转的事件和样式方案。

很多时候，当用户在移动端体验产品时，难免会触发手机系统的横屏指令，不可否认，横屏确实可以给用户带来更好的用户体验。

这里提供一些思路，我们给window.orientation取值，正负90表示横屏模式、0和180表现为竖屏模式；

indow.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}  　

样式可以这样写：

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

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

　　

　

--任何组织或个人分享、转载本博客内容，请务必以链接方式注明出处：来自博客园--下雨天的太阳（http://www.cnblogs.com/doomjx/）--
--请勿以任何形式修改内容（包括文字和图片）--

 

转载于:https://www.cnblogs.com/doomjx/p/5773019.html