网页访问UA判断:手机QQ内置浏览器与QQ浏览器的UA区分

网页访问UA判断:手机QQ内置浏览器与QQ浏览器的UA区分

在部署我个人的一个兴趣影视站时,需要实现一个引导微信用户进行浏览器打开的动作:

 好歹QQ用户也是不少的也要为 QQ用户着想,于是同样的效果也要在手机QQ上实现,度娘了一下午未果,大部分提供的UA判断把QQ浏览器也判断了进去,遂问我的墨基友,成了,故mark在这供以后使用

判断:

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
    // 判断是否微信浏览
    return true;
} else if (navigator.userAgent.indexOf("QQ/") > 0) {
    // 判断是否手Q浏览
    return true;
} else if (ua.match(/WeiBo/i) == "weibo"){
    // 判断是否微博浏览
    return true;
} else {
    // 否则为QQ浏览器以及其他三方浏览器
    return false;
}

遮罩层实现整段代码:

<style type="text/css">
    .weixin-tip {
        background: rgba(0, 0, 0, 0.8);
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
    }

    .weixin-tip-icon {
        width: 52px;
        height: 67px;
        background: url(http://cdn.dkfirst.cn/weixin-tip.png) no-repeat;
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .weixin-tip-txt {
        margin-top: 107px;
        color: #fff;
        font-size: 16px;
        line-height: 1.5;
    }
</style>
<div class="weixin-tip">
    <span class="weixin-tip-icon"></span>
    <p class="weixin-tip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>
<script type="text/javascript">
    $(window).on("load", function () {
        var winHeight = $(window).height();

        function is_WhatUA() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 判断是否微信浏览
                return true;
            } else if (navigator.userAgent.indexOf("QQ/") > 0) {
                // 判断是否手Q浏览
                return true;
            } else if (ua.match(/WeiBo/i) == "weibo"){
                // 判断是否微博浏览
                return true;
            } else {
                // 否则为QQ浏览器以及其他三方浏览器
                return false;
            }
        }

        var isBinGo = is_WhatUA();
        if (isBinGo) {
            $(".weixin-tip").css("height", winHeight);
            $(".weixin-tip").show();
        }
    })
</script>

2 Replies to “网页访问UA判断:手机QQ内置浏览器与QQ浏览器的UA区分”

  1. 这样每个页面都需要加这段啊,能统一加上就好了,后台设置一个统一开启的开关,需要的开启,不需要不开。

发表评论

电子邮件地址不会被公开。 必填项已用*标注