js识别浏览器踩坑记

最近产品给的一个需求是区分safari和其他浏览器显示不一样的东西。

先贴一张在pc端的图： js识别浏览器踩坑记

上代码：

const ua = navigator.userAgent
var browser = {
    isIE: function(){
        return ua.indexOf("Trident") != -1
    },
    isOpera: function(){
        return ua.indexOf("OPR") != -1
    },
    isFireFox: function(){
        return ua.indexOf("Gecko") != -1
    },
    isSafari: function(){
        return ua.indexOf("Safari") != -1 && ua.indexOf("Chrome") === -1
    },
    isQQBrower: function(){
        return ua.indexOf("QQBrowser") != -1
    },
    isChrome: function(){
        return ua.indexOf("Chrome") != -1
    },
    isUC: function(){
        return ua.indexOf("UBrowser") != -1
    }
}

var isChrome = browser.isChrome
var isFireFox = browser.isFireFox
var isIE = browser.isIE
var isOpera = browser.isOpera
var isQQBrower = browser.isQQBrower
var isSafari = browser.isSafari
var isUC = browser.isUC

坑：

我们产品在验证功能的时候发现qq浏览器和safari是一样的效果，这个实际是不符合要求的，没办法，单独给qq浏览器做了一个区别对待。

另外推荐一下别人家的博主的文章：

浏览器内核介绍

js识别各浏览器

诸如百度，遨游等浏览器识别

js识别浏览器踩坑记

相关推荐