H5页面样式在部分手机浏览器中显示异常/不显示的原因及解决方法
- 2020/07/30
- 0阅读
月初公司某个功能上线，其中一个h5活动邀请页面在UC浏览器中打开的效果如下：
what the fuck？我的样式呢？？
最开始以为是html中的样式文件未打包，查看OSS文件和清除CDN缓存后，仍未解决该问题。
之后突然想到可能是由于浏览器自带的广告屏蔽插件导致，尝试关闭浏览器的广告过滤功能后问题解决。
但是我们不可能一个个去让用户关闭浏览器的广告过滤功能啊，于是我尝试逐步修改替换了html、css、js文件中包含ad的变量名，但是均无法通过广告过滤。
这时我突然发现url中存在ad关键字，因为当前的url是
emmm，尝试切换到其他目录测试：均顺利通过广告过滤
在之后搜索中也在腾讯的外包文档中找到这句话：
命名不能包含ad、guanggao、ads、gg 是广告含义的关键词，避免元素被网页拓展、插件屏蔽
最后说下结论：网页路径及文件、参数命名均不能包含ad、guanggao、ads等是广告含义的关键词，不然容易触发浏览器的屏蔽。
测试范围：
未触发屏蔽的浏览器：
- 魅族系统浏览器
- 夸克浏览器
- 神奇浏览器
触发屏蔽的浏览器：
- UC浏览器
- QQ浏览器
- HUAWEI系统浏览器
- 小米系统浏览器
