H5双重标题的适配

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

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

 <div class="headbar">
      <center class="headbarTitle">我的</center>
      <div class="returnBtn">
          <a href="javascript:history.back();">
              <img src="data: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();
 }

实现效果：