forked from smallk2012/app-down-h5demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (134 loc) · 4.85 KB
/
index.html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta content="[email protected]" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--ie渲染引擎-->
<!--忽略电话号码和email识别-->
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--隐藏ios上的浏览器地址栏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- UC默认竖屏 ，UC强制全屏 -->
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 QQ强制全屏 -->
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<!--禁止缓存-->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<title>APP下载</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
html {
position: relative;
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: url('./img/bg2.jpg');
background-color: black;
}
.cont {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url('./img/bg1.png');
}
.download {
position: absolute;
top: 10%;
left: 50%;
z-index: 10;
display: none;
margin-left: -60px;
width: 120px;
height: 44px;
line-height: 44px;
text-align: center;
text-decoration:none;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="cont"></div>
<span id="download" href="javascript:void(0)" class="download" onclick="onDownclick()">点击下载</span>
<script>
var iosUrl = '';//app store地址
var androidUrl = '';//安卓地址
//判断是否是微信浏览器的函数
function isWeiXin() {
//window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
var ua = window.navigator.userAgent.toLowerCase();
//通过正则表达式匹配ua中是否含有MicroMessenger字符串
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
}
var browser = {
versions: function () {
var u = navigator.userAgent;
return { //移动终端浏览器版本信息
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1 //是否iPad
};
}()
};
function download() {
if (browser.versions.ios && iosUrl) {
location.href = iosUrl;
}
else if (androidUrl) {
location.href = iosUrl;
} else {
console.log('暂无下载');
//不下载
}
}
window.onload = function () {
if (isWeiXin()) {
console.log('微信');
//document.getElementById('download').style.display = 'block';
//下载按钮显示出来
} else {
download()
}
}
function onDownclick(){
download()
}
</script>
</body>
</html>