需求：做一个下载页，用扫一扫进入页面，根据设备判断是Android端还是iOS端，显示不同的下载按钮。这个下载页面的链接地址是 “http://a.website.com/downclient/download.html”。
遇到的问题：按钮是a标签，起初自己的Android机器测试如丝般顺滑，微信浏览器扫一扫可以点击按钮跳转浏览器执行下载app，没有任何问题。发布项目之后，同事的苹果手机同样扫码，点击立即安装按钮不跳转，一片死寂···，没有任何反应。
原因：这个生成二维码的下载页面链接有问题·····域名解析“a”换成了“www”就解决了·····；原因不明，不想细究。
代码如下：
<!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>下载页</title> <link rel="stylesheet" href="css/reset.css"/> <link rel="stylesheet" href="css/style.css"/> <style> #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: 15%; padding:0 5%; position: relative; font-size:16px;color: orange;} </style> </head> <body> <div class="c_bj"> <div class="c_logo"> <img src="images/logo-2.png" /> <img src="images/Logo.png" style="margin-left: 139px;padding-top: 10px;width: 100px;"/> </div> <a id="btn-android" href="http://a.website.com/app/android.apk" onclick="isWeixin()" class="c_and_btn"> </a> <a id="btn-ios" href="https://itunes.apple.com/cn/app/id128****846" onclick="isWeixin()" class="c_ios_btn"> </a> <div class="tip" id="tip" style = "display:none"> <div class="tip_img"> <img src="images/tip.png" alt="#" width="100%" height="auto" /> </div> </div> </div> <div id="weixin-tip"><p>请点击右上角选择在浏览器中打开本页面</p></div> </body> <script> var pla=ismobile();//0为ios，1为android或者其他 function ismobile(test){ var u = navigator.userAgent, app = navigator.appVersion; if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){ return '0'; }else{ return '1'; } }catch(e){} } }else if( u.indexOf('iPad') > -1){ return '0'; }else{ return '1'; } }; if(pla=="0"){ document.getElementById('btn-android').style.display="none"; }else{ document.getElementById('btn-ios').style.display="none"; } //监测微信下载 var is_weixin = (function() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } })(); function isWeixin(){ if(is_weixin&&pla!="0") { //ios微信会弹出前往appStore,不需要此提示 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'; } } //点击蒙层关闭 var close = document.getElementById('weixin-tip'); close.onclick = function(){ var tip = document.getElementById('weixin-tip'); tip.style.display = 'none'; } </script> </html>
起初将ios需要的链接直接生成二维码给ios设备扫描“https://itunes.apple.com/cn/app/id128****846”；会直接弹打开“App Store”；证明链接没有任何问题。
网上也有说是onclick方法不能执行，还是试试吧。删除按钮中的onclick方法，引入jQuery写了个 $(‘body’).on(‘click’,’#btn-android,#btn-ios‘,isWeixin)；
测试的时候发现那个大兄弟可能跟我遇到的不是一个问题。
还有种说法是要用腾讯应用宝的外链才可以跳转，应该是针对直接点击链接跳转，与我遇到的问题应该是不同的。
后来我在我本地用自己的域名层层虚拟服务器转发解析到我工作的主机上，”http://www.doeat.cn:82/downclient/download.html”,用这个链接生成了二维码，让同事IOS来扫一扫，结果神奇的可以跳转App Store······；一下子有点懵······不知如何是好。
经过反复的对比唯一的差别那只有域名了额·····
还好“www”没有解析到别处服务器。用 “http://www.website.com/downclient/download.html”生成了新的二维码给同事扫描，问题解决。
非常无奈，因为这种问题耽误了大把时间·····