@media screen and (max-aspect-ratio:1/1){
.vip-vertical{display:block;}
.vip-landscape{ display:none;}
}
@media screen and (min-aspect-ratio:1/1){
.vip-landscape{display:block;}
.vip-vertical{display:none;}
}
案例
强制横竖屏
@media screen and (orientation: portrait) {/*竖屏*/
html{
width:100%;
height:100%;
overflow:hidden;
}
#wkblottery{
position:absolute;
}
}
@media screen and (orientation: landscape) {/*横屏*/
html{
width:100%;
height:100%;
}
#wkblottery{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
}