移动端解决横屏，竖屏的方法

1：CSS样式

//横屏模式

body.darkmask{ position: absolute; left: 0; top:0; overflow: hidden; width: 100%; height: 100%; background: #AA0000!important; z-index: 10;}

body.darkmask:before{ content:'为了更好的体验，请使用竖屏浏览'; position:absolute; top:0; left:0; right:0; bottom:0; background:#b91f2b; z-index:9999; text-align: center; color: white; font-size: 22px; letter-spacing:1px; padding-top: 15%; }

body.darkmask:after{ content: ''; width: 74px; height: 110px; z-index: 10000; background: url(./../img/rotate.png) 0 0 no-repeat; background-size: 100%; left: 0; right: 0; margin: auto; top: 40%; position: absolute; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-animation: tablet 1.6s ease-in infinite; -moz-animation: tablet 1.6s ease-in infinite; -o-animation: tablet 1.6s ease-in infinite; -ms-animation: tablet 1.6s ease-in infinite; animation: tablet 1.6s ease-in infinite; }

@-webkit-keyframes tablet {

0% { -webkit-transform: rotate(-90deg); }

25% { -webkit-transform: rotate(0deg); }

50% { -webkit-transform: rotate(0deg); }

75% { -webkit-transform: rotate(-90deg); }

100% { -webkit-transform: rotate(-90deg); }

}

 

@-moz-keyframes tablet {

0% { -moz-transform: rotate(-90deg); }

25% { -moz-transform: rotate(0deg); }

50% { -moz-transform: rotate(0deg); }

75% { -moz-transform: rotate(-90deg); }

100% { -moz-transform: rotate(-90deg); }

}

@keyframes tablet {

0% { transform: rotate(-90deg); }

25% { transform: rotate(0deg); }

50% { transform: rotate(0deg); }

75% { transform: rotate(-90deg); }

100% { transform: rotate(-90deg); }

}

 

2：JS方法

//横屏提示

islandscape:function(){

var flag = false;

if( (typeof window.orientation != "undefined" &&( window.orientation == 180 || window.orientation==0))||(typeof window.screen.orientation != "undefined" &&( window.screen.orientation.angle == 180 || window.screen.orientation.angle==0)) ){//竖屏

flag = false;

}

if( (typeof window.orientation != "undefined" &&( window.orientation == 90 || window.orientation==-90))||(typeof window.screen.orientation != "undefined" &&( window.screen.orientation.angle == 90 || window.screen.orientation.angle==-90)) ){//横屏

flag = true;

}

return flag;

},

landscapeMask:function(){

window.onresize = function () { location.reload(); }

if(this.islandscape()){

document.body.className = "darkmask"

}else{

document.body.className = ""

}

},

 

3：图片

4：用法

直接调用landscapeMask（）方法

转载于:https://www.cnblogs.com/voledy/p/7068715.html