前端开发疑难杂症篇（一）

转入前端开发也有一年半了，这18个月的时间，遇到不少问题，很多问题相信大家和我一样困惑，所以写个随笔，记下这些问题的解决办法。另一方面，每次解决问题之后，下次再遇到同样的问题的时候，自己都不记得了。

今天再弄一个APP下载页面的时候，IOS要做从APP Store中下载，Android可以直接打包下载，这里遇到了两个问题。

一、在手机端，点击下载链接（a标签）的时候没反应

　　很诧异，在网上也百度了一下，感觉和我的问题都不一样，最后，一点点的删除代码，才发现是一段CSS代码出现了问题


原来是这个问题，其实也很好理解，这个背景覆盖了a标签。

二、IOS下载链接在微信浏览器中打不开

解决办法说起来也不难，思路就是，增加提示，让用户按提示来操作。但是最关键的一步就是，判断是不是微信内置浏览器打开，下面呈上这段代码

<script>
$(function(){
$("a").click(function(e){
e.preventDefault();//阻止浏览器默认事件
if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
$(".back-bg").show();
$("span.targetBrowser").text("微信");
}
if (ua.match(/WeiBo/i) == "weibo") {
//在新浪微博客户端打开
$(".back-bg").show();
$("span.targetBrowser").text("新浪微博");
}
if (ua.match(/QQ/i) == "qq") {
//在QQ空间打开
$(".back-bg").show();
$("span.targetBrowser").text("QQ");
}
if (browser.versions.ios) {
//是否在IOS浏览器打开
var _href=$(this).attr("href");
window.location.href=_href;
}
if(browser.versions.android){
//是否在安卓浏览器打开
var _href=$(this).attr("href");
window.location.href=_href;
}
} else {
//否则就是PC浏览器打开
}
});
$("button#close").click(function(){
$(".back-bg").hide();
});
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.*/), //是否为移动终端
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, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
});
</script>