扫二维码自动识别安卓苹果端

相信很多朋友都遇到过这样的一种情况吧，老板要求一个二维码集成2个链接（安卓和苹果），手机一扫就可以自动识别安卓机和苹果机了。但是怎么实现又犯难了吧，百度了很多都找不到合适的答案，我特此在这写那么一篇关于这要求的文章，希望可以帮助到你。
思路：
二维码就无非是一个URL，所以根据这个思路是需要一个页面，承载这个URL，在这个页面中进行处理识别安卓机和苹果机，但是微信的安全性做了限制，一般都会屏蔽来源不是腾讯的 APK,所以需要在用户扫二维码之后给用户一个提示，让他去跳转。这就和HTML有关系了。
步骤：
新建一个网页（HTML）

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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">
  <link rel="stylesheet" href="./css/download.css">
<title>医务通APP下载</title>
</head>
<body class="success">
<div id="weixin-tip"><p><img src="./download_files/live_weixin.png" alt="微信打开"><span id="close" title="关闭" class="close">X</span></p></div>
<script type="text/javascript">
var is_weixin = (function() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
})();
function showFilter(){
if(is_weixin) {
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
var tip = document.getElementById('weixin-tip');
tip.style.height = winHeight + 'px';
tip.style.display = 'block';
}}
function delayURL(url, time) {
setTimeout("top.location.href='" + url + "'", time);
}
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
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
symbian: u.indexOf('Symbian') > -1, //是否Symbian
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}()
}
var isMobile = browser.versions.ios || browser.versions.android || browser.versions.symbian;
var cWidth = document.body.clientWidth;
var sWidth = window.screen.width;
var tWidth = (document.body.clientWidth + window.screen.width)/2;
var fontSize = isMobile?parseInt(tWidth/9):parseInt(tWidth/30);
var imgWidth = isMobile?parseInt(tWidth/1.5):parseInt(tWidth/4.5);
var imgHeight = parseInt(imgWidth*(16/49));
var imgWidth2 = isMobile?parseInt(tWidth/4):parseInt(tWidth/12);
var imgHeight2 = parseInt(imgWidth2*(54/124));
var cot ="";
var dev ="<center>";
if(browser.versions.iPad || browser.versions.iPhone){
cot +="<a href=' http://itunes.apple.com/cn/app/id472208016?mt=8 ' class='android-btn' id='ios_weixin'></a>";
showFilter();
dev ="I"
}else if(browser.versions.android){
cot +="<a href=' http://download.kugou.com/download/kugou_android ' class='android-btn' id='J_weixin'></a>";
showFilter();
dev ="A"
}else if(browser.versions.symbian){
dev ="S";
}else{
cot +="<a href='http://itunes.apple.com/cn/app/id472208016?mt=8' class='android-btn' id='ios_weixin'></a>" +
"<a href='http://download.kugou.com/download/kugou_android' class='android-btn' id='J_weixin'></a>";
}
cot += "</center>"
</script>    
<div class="page-wrap">
<div class="download">
<h3 class="entry-hd"></h3>
<div class="download-btn" id="=dl">
<script type="text/javascript">
document.write(cot);
window.onload = function(){
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
var tip = document.getElementById('weixin-tip');
var close = document.getElementById('close')
close.onclick = function(){
tip.style.display = 'none';
}
if(dev=="A"){
var btn = document.getElementById('J_weixin');
if(is_weixin) {
btn.onclick = function(){
tip.style.height = winHeight + 'px';
tip.style.display = 'block';
return false;
}}
else{
if (/msie/i.test(navigator.userAgent)){ //ie brower
document.getElementById("J_weixin").click();
}else{
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
setTimeout(document.getElementById("J_weixin").dispatchEvent(e),2000);
}}}
else if( dev == "I"){
var btn_ios = document.getElementById('ios_weixin');
if(is_weixin){
btn_ios.onclick = function(){
tip.style.height = winHeight + 'px';
tip.style.display = 'block';
return false;
}}
else{
if (/msie/i.test(navigator.userAgent)){ //ie brower
document.getElementById("ios_weixin").click();
}else{
var e = document.createEvent('MouseEvent');
e.initEvent('click', false, false);
setTimeout(document.getElementById("ios_weixin").dispatchEvent(e),2000);
}}}}
</script></div></div></div>
</body></html>

CSS样式
>@charset "utf-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
html,body{width:100%}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;background:#fff;font-size:14px;color:#333;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img,a img,img:focus{border:0;outline:0}
img{max-width:100%;height: auto;}
textarea,input,a,textarea:focus,input:focus,a:focus{outline:none}
h1,h2,h3,h4,h5,h6{font-weight:normal;margin-bottom:15px;line-height:1.4}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit;color:#444444}
body{font-size: 62.5%; font-family: 'Microsoft Yahei','\5FAE\8F6F\96C5\9ED1',Arial,'Hiragino Sans GB','\5B8B\4F53'; line-height: 1.6}
li{list-style: none;}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}
.clearfix:after{clear:both}
.register{background: #62BDC5 url(../img/bg-480.jpg) no-repeat; background-size:cover;}
.logo{height: 17.8%; text-align: center;}
.logo img{display: inline-block; vertical-align: top; font-size: 0; width: 42.5%; margin: 0 auto;}
.device{padding: 15.8% 0 2.18%; text-align: center;}
.device img{width: 53.43%; margin: 0 auto;}
.intro{color: #fff; line-height: 2; padding-bottom: 12.18%; text-align: center; font-size: 2em; text-align: center;}
.intro p{font-size: 1.8em; border-bottom: 1px solid #fff; width: 80%; margin: 0 auto; display: inline-block; letter-spacing: .8em; white-space: nowrap; padding-left: .4em;}
.intro h2{font-size: 2.6em; letter-spacing: .1em; font-weight: bold;}
.intro img{width: 81%; margin: 0 auto;}
.send{padding: 0 6.1% 23%;}
.send-form input{float: left; padding: 15px 10px; width: 65.7%; background:#fff; border: 1px solid #fff; border-radius: 4px; font-size: 2em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.send-form button{float: right; padding: 15px 10px; white-space: nowrap; width: 31.7%;  background:#FF6F29; border: 1px solid #FF6F29; border-radius: 4px; font-size: 2em; color: #fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
/*.send-form .form-text{ float: left; background: #fff; border:0; border-radius: 4px; font-size: 2.4em;border-top: 10px; border-bottom: 10px;  padding: 10px 3.5%; line-height: 2.5em !important;  width: 59.5%; vertical-align: middle;}
.send-form .form-submit{ float: right; min-width: 66px; background: #FF6F29; -webkit-appearance: none; white-space: nowrap; letter-spacing: -1px; color: #fff; font-size: 2.4em; padding: 2.4% 2%; line-height: 2.5em; border: 0; border-radius: 4px; width: 31.5%;}
*/.wran{color: #f00; padding-top: 8px; font-size: 1.4em; visibility: hidden;}
.entry-con{font-size: 2.4em; text-align: center;}
.entry-hd{font-size: 4em; font-weight: bold; text-align: center;}
.download{color: #4D4D4D; padding: 7.2% 6.8% 9.3%;}
.download .entry-con{color: #8E8F90;}
.download-btn{padding-top: 9%;}
.download-btn a{width: 44.7%; display: inline-block; *display: inline; *zoom: 1; vertical-align: top;}
.download-btn a:hover, .download-btn a:focus{opacity: .8;}
.download-btn .android-btn{padding-left: 9%;}
.footer-bg{background: #2D2D2D; color: #E4E4E4; padding: 3.4% 2%; text-align: center; margin-bottom: 2%;}
.footer-bg .entry-con{font-size: 1.6em;}
.app img{width: 85.15%; margin: 0 auto; display: block; margin-bottom: 3.4%;}
.app .entry-con{padding-bottom: 5.4%; color: #6B6B6B;}
#weixin-tip{display:none; position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;}
#weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%; position: relative;}
#weixin-tip .close{
    color: #fff;
    padding: 5px;
    font: bold 20px/20px simsun;
    text-shadow: 0 1px 0 #ddd;
    position: absolute;
    top: 0; left: 5%;
}
@media screen and (min-width: 481px){
    .register{background-image: url(../img/bg.jpg);}
    .info{background-image: url(../img/success-bg.jpg);}
}
@media screen and (max-width: 480px){
    .intro{font-size: 1.6em;}
    .intro p{margin: 0 8% 0;}
    .send-form .form-text{font-size: 1.8em;}
    .send-form .form-submit{font-size: 1.8em;}
    .entry-hd{font-size:2.8em;}
    .info .entry-hd{font-size: 4em;}
    .info .long-hd{font-size: 3em;}
    .entry-con, .info-list{font-size: 1.8em;}
    .app .entry-con{font-size: 1.6em;}
    .footer-bg .entry-con{font-size: 1.2em;}
}
@media screen and (max-width:360px){
    .register{background-image: url(../img/bg-360.jpg);}
    .intro{font-size: 1.2em;}
    .intro p{letter-spacing: 1em;}
    .send-form .form-text{font-size: 1.4em; padding:10px 5px;}
    .send-form .form-submit{font-size: 1.4em; padding: 10px 5px;}
    .entry-hd{font-size: 2em;}
    .info .entry-hd{font-size: 3em;}
    .info .long-hd{font-size: 2.2em;}
    .entry-con, .info-list{font-size: 1.4em;}
    .app .entry-con{font-size: 1.4em;}
}

  刚刚新建了一个分享交流群，366270001，期待你们的加入。

最后编辑于：2017.12.03 03:16:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,185评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,445评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,684评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,564评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,681评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,874评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,025评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,761评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,217评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,545评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,694评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,351评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,988评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,778评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,007评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,427评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,580评论 2赞 349

扫二维码自动识别安卓苹果端

推荐阅读更多精彩内容