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

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

这里提供一些思路,我们给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