H5双重标题的适配

在QQ和微信中会自代一个标题栏，而手机浏览器没有标题栏。

因此，我自己写了一个标题栏。

<div class="headbar">
     <center class="headbarTitle">我的</center>
     <div class="returnBtn">
         <a href="javascript:history.back();">
             <img src="images/left.png" class="return">
         </a>
     </div>
</div>

 

但是，在QQ和微信查看该页面时，会出现双重标题的问题

 

 解决方法：用navigator.userAgent判断是否是在QQ或WeChat里，进行去重。

function isWeiXinBrowser(){
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    var ua = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

function isQQBrowser(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/QQ/i) == "qq"){
        return true;
    }else{
        return false;
    }
}


if(isQQBrowser() || isWeiXinBrowser() ){
    $("div[class='headbar']").hide();
}else{
    $("div[class='headbar']").show();
}

 

实现效果：