安卓端百度浏览器position：fixed不显示问题踩坑笔记

最近项目要求做一个活动落地页，要求顶部有一个下载栏始终固定，类似于这样

这种情况大家一看就知道应该直接用position：fixed来实现

.tab {
    position: fixed;
    left: 0;
    top: 0;
}

在几乎所有的情况下都显示正常，唯独在华为手机的百度浏览器中，悬浮条会被吃掉，直接就没有了。
那我来点狠的，我直接让浮条不再浮动，我把它放在顶部，然后让剩下的模块滚动，这样总行了吧。很遗憾，在几乎所有的百度浏览器端都会被吃掉
google之后发现，有位小伙伴给出了自己的解决方案segmentfault.com/a/119000001… 文中提到

经过大量排查之后确定，发现只有百度浏览器中会隐藏不见；
原来这是百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）

解决方案： 底部不要100%宽度，且不要为一张图片
还可以通过（高度未超屏）position：absolute 来实现相同效果或采用js来实现布局效果

赶紧试试手，发现，设置宽度98%时，失败了。然后我又换了一种思路：最开始只是普通block显示，当我页面开始滚动时给元素加上position:fixed属性，也失败了。。。 接着就找到了这位小伙伴@唐唐的文章>juejin.cn/post/684490…

.btn_fixed {
    position: fixed;
    bottom: 0;
    left: 0;
}
.btn_fixed::after {
    content: '.';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 21vw;
    background-size: cover;
    background-image: url('./images/btn_fixed.png')
}

我的悬浮栏并不是一张图片，而是有按钮有文字的。不得已我只能切一张浮条的整图试一试小伙伴的方法。果然挺好使，安卓端百度浏览器的显示异常解决了。

但是，经过多机型测试之后发现，唯独在iPhone8的微信端，悬浮条又被吃掉了。。。

看来还得想想办法，那就区分微信环境吧，在微信端设置position：fixed，其他环境用伪元素，问题终于解决了，代码结构如下：

<div class="tab">
	<div class="tab-content">
	  <img src="../logo.png" alt="" class="tab_img">
	  <div class="tab_btn">立即下载</div>
	</div>
</div>

//初始状态设定用伪元素模式
.tab {
    position: fixed;
    left: 0;
    top: 0; 
    width: 100%;
    box-shadow: 0 -3px 8px #000;
    background: #fff;
}
// tab栏中的内容隐藏
.tab-content {
    display: none;
}

.tab::after {
  content: '';
  width: 100%;
  height: 1.025rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-image: url('../images/activity/tab.jpg');
  background-size: contain;
  background-position: 0;
}

// 判断处于微信h5环境时，使用position：fixed显示
$(document).ready(function () {
  var ua = navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i)=="micromessenger") {
	$('.tab').css('height', '100px')
	$('.tab::after').css('display', 'none')
	$('.tab .tab-content').css('display', 'flex')
  }
})

实现方式可能还有缺陷，如果哪位小伙伴有更好的解决方案，欢迎指教。