移动端横屏提示动画

  移动端横屏问题:由于屏幕的问题,在特定的开发条件下,实际上要求我们必须竖屏查看H5展示。

展示效果

Demo

强制竖屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

HTML代码

1
2
3
4
5
6
<div id="MoblileR" class="mob-con">
<div class="mob-cen">
<i></i>
<div>为了更好的体验,请将手机/平板竖过来</div>
</div>
</div>

CSS代码

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.mob-con{
width: 100%;
height: 100%;
display: none;
position: absolute;
left: 0;
top: 0;
background: #32373b;
z-index: 9990;
}

.mob-cen{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
}

.mob-cen i{
margin: auto;
display: block;
width: 128px;
height: 194px;
/*background: url(../images/hengping.png 0 0 no-repeat);*/
background: url(images/hengping.png);
background-size: 128px 194px;
animation: mobileR 1.5s ease infinite alternate;
-webkit-animation: mobileR 1.5s ease infinite alternate;
}

.mob-cen div{
font-size: 22px;
margin-top: 20px;
color: #ffd40a;
}

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

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

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

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

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

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

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

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

}

屏幕判断

方法一

1
2
3
4
5
6
7
/*方法一:*/
/* 媒体查询 orientation,定义'height'是否大于或等于'width'。值portrait代表是,landscape代表否 */
@media screen and (orientation:landscape) {
.mob-con{
display: block;
}

}

方法二

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
<!-- 方法二: -->
//判断屏幕横屏
function oMobl(){
if(document.documentElement.clientHeight >= document.documentElement.clientWidth){
return "protrait";
}else{
return "landscape";
}
}
//显示实例提示
function oMobx(){
var MoblieR = document.getElementById("MoblileR");
var oMobs = oMobl();
if(oMobs == "protrait"){
MoblieR.style.display = "none";
}else{
MoblieR.style.display = "block";
}
}
function oInit(){
oMobx();
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",function(){
setTimeout(oMobx,200);
})
}
oInit();

Mobile Web开发基础之四————处理设备的横竖屏
检测移动设备横竖屏

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 展示效果
    1. 1.1. 强制竖屏
  2. 2. HTML代码
  3. 3. CSS代码
  4. 4. 屏幕判断
    1. 4.1. 方法一
    2. 4.2. 方法二
,