微信QQ打开网页时提示用浏览器打开
一,需求分析
1.1,使用微信或QQ打开网址时，无法在微信或QQ内打开常用下载软件，手机APP等。故此需要在微信qq里提示
二,功能实现
2.1 html实现
<div id='weixin-tip-box'>
<div class="triangle_border_up">
<span></span>
</div>
<div class="weixin-tip">
<p>
请点击右上角
</p>
<p class="content">
选择"浏览器中打开"
</p>
</div>
</div>
2.2 css实现
<style type="text/css">
* {
margin:;
padding:;
} #weixin-tip-box {
display: none;
position: fixed;
right:;
top: 4px;
align-items: center;
}
.weixin-tip {
background: #40b2a8;
z-index:;
padding: 8px;
border-radius: 8px;
margin-right: 8px
} .weixin-tip p {
text-align: center;
font-size: 14px;
color: #fff
} .weixin-tip p.content {
text-align: center;
font-size: 14px
} .triangle_border_up {
width:;
height:;
border-width: 0 6px 12px;
border-style: solid;
border-color: transparent transparent #40b2a8;
/*透明 透明 灰*/
margin-left: 114px
}
</style>
2.3 javascript实现
<script type="text/javascript">
var is_weixin = (function () {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页
return true;
} else if (ua.match(/QQ/i) == "qq") {//qq里打开网页
return true;
} else {
return false;
}
})();
window.onload = function () {
//var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
var tip = document.getElementById('weixin-tip-box');
if (is_weixin) {
tip.style.display = 'block';
return false;
}
}
</script>
2.4 实现效果
<!DOCTYPE html>
<html lang="zh_CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<style type="text/css">
* {
margin: 0;
padding: 0;
} #weixin-tip-box {
display: none;
position: fixed;
right: 0;
top: 4px;
align-items: center;
}
.weixin-tip {
background: #40b2a8;
z-index: 100;
padding: 8px;
border-radius: 8px;
margin-right: 8px
} .weixin-tip p {
text-align: center;
font-size: 14px;
color: #fff
} .weixin-tip p.content {
text-align: center;
font-size: 14px
} .triangle_border_up {
width: 0;
height: 0;
border-width: 0 6px 12px;
border-style: solid;
border-color: transparent transparent #40b2a8;
/*透明 透明 灰*/
margin-left: 114px
}
</style>
<title>app下载</title>
</head> <body class="success">
<div id='weixin-tip-box'>
<div class="triangle_border_up">
<span></span>
</div>
<div class="weixin-tip">
<p>
请点击右上角
</p>
<p class="content">
选择"浏览器中打开"
</p>
</div>
</div> <script type="text/javascript">
var is_weixin = (function () {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {//微信中打开网页
return true;
} else if (ua.match(/QQ/i) == "qq") {//qq里打开网页
return true;
} else {
return true;
}
})();
window.onload = function () {
//var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
var tip = document.getElementById('weixin-tip-box');
if (is_weixin) {
tip.style.display = 'block';
return false;
}
}
</script>
</body> </html>
js判断移动端使用的系统平台
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
//安卓手机
} else if (u.indexOf('iPhone') > -1) {
//苹果手机
} else if (u.indexOf('Windows Phone') > -1) {
//winphone手机
}
js判断访问网站的设备是否是PC
//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳转语句
if(system.win||system.mac||system.xll){
alert("PC访问");
}else{
alert("非PC访问");
}