博客

@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%;
    } 
}