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

转入前端开发也有一年半了，这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>