admin管理员组文章数量:1616032
背景
在做这样一个活动页时,发现底部fixed定位的 button 元素在百度浏览器中展示不出来。
Google后发现了这位小伙伴的文章 针对前端在百度浏览器总的固定定位的问题
文中提到:
这是百度浏览器的广告屏蔽机制,会让这种固定定位在底部的元素当作广告来屏蔽掉(隐藏移除不显示)
并给出了他的解决方案:
底部不要100%宽度,且不要为一张图片; 还可以通过(高度未超屏)position:absolute 来实现相同效果或采用js来实现布局效果 (场景较少)
目前网上看到的方法都是在元素width上做文章,感觉都不太好用(会在最后的其他方法中细说)。
本次分享为提供一个新思路:伪元素大法!
伪元素大法(推荐!!)
html
原代码结构
<div class="bottom_wrap">
<div class="btn" @click="handleBtn">
我是业主, 我要申请找房
</div>
</div>
复制代码
新代码结构
<div class="btn_fixed" @click="handleBtn"></div>
复制代码
思路
btn_fixed 就是一个空 div, 将按钮切图后,作为伪元素添加到页面中。这样就能完美避开被百度浏览器广告机制的屏蔽了~
新的样式为
.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')
}
复制代码
一些其它方案
网上还看到了一些其他方案,感觉都不太好用。
改变宽度法(丑)
有一种思路是给固定定位的图片 width 设置为 99%
(文章地址: 手机百度APP H5网页position:fixed属性失效. DIV结构被自动隐藏),
此前,直接对img加了一个width:100%;的属性. 后来经过不断地尝试.发现只要图片不是宽度100%,手机百度则不会把它当做广告屏蔽掉. 所以只需要对img改变一下宽度如99%即可. 或者不使用整个大图片
但经测试,发现如今图片宽度哪怕是 90% 也依然会被屏蔽,猜想百度浏览器的广告机制又做了升级,扩大了过滤范围。
然而 width 太小,明显太丑难以过UI那关
改进: 宽度设置百分比,transfrom 缩放(失败)
于是想到设置宽度为 80%, 再通过 transfrom: scale(1.25, 1.25) 去进行缩放
嗯,结果又被百度屏蔽了……失败。
后续
灵机一动,想到了使用伪元素来解决,于是有了上述的【伪元素大法】~ 独家原创,亲测好用,希望可以帮到大家~
转载于:https://juejin.im/post/5cd3a38bf265da036f4e99b1
版权声明:本文标题:巧用伪元素解决fixed元素被百度浏览器屏蔽问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728734561a1170775.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论