区别谷歌浏览器和360极速浏览器,pingfang字体在360中模糊_360游览器展示的字体和谷歌不一样

区别谷歌浏览器和360极速浏览器

先吐槽一下，沙雕测试，兼容了ie，又要让我兼容360极速模式和兼容ie模式，都啥社会了！

说一下需求

先来说一下bug，采用本地字体pingfang，在谷歌,ie和360兼容模式下均正常，但在360极速模式下字体模糊不清

分析

1. 在多种浏览器下都正常，只有在360极速模式不正常，之有可能是360极速模式的问题
2. 360极速模式采用的是谷歌内核

解决办法

最终和UI确认后，在360极速模式下采用浏览器默认字体，其他浏览器采用自定义pingfang字体

代码实现

问题是如何区分360极速模式和谷歌

分析

1. window对象有一个 navigator对象
2. 利用navigator.userAgent属性来区别谷歌内核何其他浏览器内核
3. 仔细比较360极速模式和谷歌的navigator对象差异不同，找到 userActivation在谷歌中有，360中没有

Code

const {navigator} = window
// 谷歌和360极速模式区别是 naviator.userActivation
if(navigator.userAgent.indexOf('AppleWebkit') !== -1 && !navigator.userActivation){
// 360极速模式
}else{
// 谷歌
}
1
2
3
4
5
6
7