区别谷歌浏览器和360极速浏览器
先吐槽一下,沙雕测试,兼容了ie,又要让我兼容360极速模式和兼容ie模式,都啥社会了!
说一下需求
先来说一下bug,采用本地字体pingfang,在谷歌,ie和360兼容模式下均正常,但在360极速模式下字体模糊不清
分析
- 在多种浏览器下都正常,只有在360极速模式不正常,之有可能是360极速模式的问题
- 360极速模式采用的是谷歌内核
解决办法
最终和UI确认后,在360极速模式下采用浏览器默认字体,其他浏览器采用自定义pingfang字体
代码实现
问题是如何区分360极速模式和谷歌
分析
- window对象有一个 navigator对象
- 利用navigator.userAgent属性来区别谷歌内核何其他浏览器内核
- 仔细比较360极速模式和谷歌的navigator对象差异不同,找到 userActivation在谷歌中有,360中没有
Code
const {navigator} = window
// 谷歌和360极速模式区别是 naviator.userActivation
if(navigator.userAgent.indexOf('AppleWebkit') !== -1 && !navigator.userActivation){
// 360极速模式
}else{
// 谷歌
}