有时候H5没有必要在手机横屏下和PC下显示，可以做一个提示层，提示用户使用竖屏浏览。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/***横竖屏提示浮层***/
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.mask{position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;}
.lock{background-color:#03154a;color:#FFFFFF;z-index:9999;font-size:9px;}
.lock-bg{width:67px;height:108px;background:url(http://img11.360buyimg.com/cms/jfs/t1111/59/483894116/1097/17b6bfef/5527a0c1N3c992211.png) 0 0 no-repeat;-webkit-background-size:67px auto;background-size:67px auto;-webkit-animation:lock 3s infinite 1.5s linear;animation:lock 3s infinite 1.5s linear;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.lock-txt{font-size:1.5em;margin-top:4px;}
@-webkit-keyframes lock{
    0%{-webkit-transform:rotate(90deg)}
    20%{-webkit-transform:translate(0)}
    80%{-webkit-transform:translate(0)}
    100%{-webkit-transform:translate(90deg)}
}
@keyframes lock{
    0%{transform:rotate(90deg)}
    20%{transform:translate(0)}
    80%{transform:translate(0)}
    100%{transform:translate(90deg)}
}
@media screen and (orientation:portrait){
    .lock{display:none !important}
}
1
2
3
4
5
6
7
<div class="mask lock flex flex-v flex-align-center flex-pack-center">
    <div class="lock-bg">
    </div>
    <p class="lock-txt">
        为了更好的体验，请使用竖屏浏览
    </p>
</div>