1.head直接添加一下js代码：viewport标签

1
2
3
4
5
6
7
8
9
10
<script>
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi" minimal-ui>');
}
</script>

minimal-ui：iOS 7.1 的 Safari 为 meta 标签新增

minimal-ui 属性，在网页加载时隐藏地址栏与导航栏。
想了解这些属性，请查看链接：http://www.npm8.com/?p=1786
如图:

a

在过去，用 Safari 打开一个网页后是这样的：

b

始终强调人性化设计的苹果当然注意到了这点，于是在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性，让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

如何实现？你只需将 “minimal-ui” 加入 viewport meta 标签的属性中，比如：

<meta name="viewport" content="minimal-ui">

但是：苹果在 iOS 8 中移除了 ‘minimal-ui’，可能的原因是页面内容不应该能够控制系统的 UI。

2.屏幕设备旋转判断

原来屏幕设备旋转判断用js来判断其页面的宽高比例，但是其实css也可以完成这样的功能

1
2
3
4
5
6
7
<!--屏幕设备旋转判断开始-->
<div id="orientLayer" class="mod-orient-layer">
<div class="mod-orient-layer__content"><i class="icon mod-orient-layer__icon-orient"></i>
<div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@-webkit-keyframes rotation {
10% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
50%, 60% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg)
}
90% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
100% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
}

@keyframes rotation {
10% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
50%, 60% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg)
}
90% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
100% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
}

#orientLayer {
display: none;
}

@media screen and (min-aspect-ratio: 13/8) {
#orientLayer {
display: block;
width:100%;
height:100%;
}
}

.mod-orient-layer {
display: none;
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #333;
z-index: 9997
}

.mod-orient-layer__content {
position: absolute;
width: 100%;
top: 45%;
margin-top: -75px;
text-align: center
}

.mod-orient-layer__icon-orient {
background-image: url(../images/icon-orient.png);
display: inline-block;
width: 67px;
height: 109px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-webkit-animation: rotation infinite 1.5s ease-in-out;
animation: rotation infinite 1.5s ease-in-out;
-webkit-background-size: 67px;
background-size: 67px
}

.mod-orient-layer__desc {
margin-top: 20px;
font-size: 15px;
color: #fff
}

当屏幕横屏的时候会有如下的效果：

c