H5双重标题的适配

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

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

1 <div class="headbar">
2      <center class="headbarTitle">我的center>
3      <div class="returnBtn">
4          <a href="javascript:history.back();">
5              <img src="images/left.png" class="return">
6          a>
7      div>
8 div>

 

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

 

 

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

 1 function isWeiXinBrowser(){
 2     //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
 3     var ua = window.navigator.userAgent.toLowerCase();
 4     //通过正则表达式匹配ua中是否含有MicroMessenger字符串
 5     if(ua.match(/MicroMessenger/i) == 'micromessenger'){
 6         return true;
 7     }else{
 8         return false;
 9     }
10 }
11 
12 function isQQBrowser(){
13     var ua = navigator.userAgent.toLowerCase();
14     if(ua.match(/QQ/i) == "qq"){
15         return true;
16     }else{
17         return false;
18     }
19 }
20 
21 
22 if(isQQBrowser() || isWeiXinBrowser() ){
23     $("div[class='headbar']").hide();
24 }else{
25     $("div[class='headbar']").show();
26 }

 

实现效果：

 

转载于:https://www.cnblogs.com/luoyihao/p/11465865.html