用js判断当前设备（电脑or手机）、浏览器、操作系统

骑猪看日落 2023-08-17 17:05 20阅读 0赞

今天在做一个网站浏览量记录功能的时候，发现网上有很多方法判断出当前的设备、浏览器和操作系统  
我对其进行了整理:

**需求**：  
添加一条浏览记录，需要在前台拿到以下数据：  
判断出当前设备是电脑还是手机：

*  电脑：
    
     *  *判断出操作系统、浏览器*
 *  手机：
    
     *  *判断出操作系统*

代码实现：

// 当前产品浏览量加一
            function addVisit(proId) {
                //此处是拿到cookie中当前会员的id
                var userId = $.cookie('id');
    
                //如果是电脑，则判断电脑的操作系统
                function detectOS() {
                    var sUserAgent = navigator.userAgent;
                    var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
                    var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
                    if (isMac) return "Mac";
                    var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
                    if (isUnix) return "Unix";
                    var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
                    if (isLinux) return "Linux";
                    if (isWin) {
                        var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
                        if (isWin2K) return "Win2000";
                        var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
                        if (isWinXP) return "WinXP";
                        var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
                        if (isWin2003) return "Win2003";
                        var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
                        if (isWinVista) return "WinVista";
                        var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
                        if (isWin7) return "Win7";
                        var isWin8 = sUserAgent.indexOf("Windows NT 8.0") > -1 || sUserAgent.indexOf("Windows 8") > -1;
                        if (isWin8) return "Win8";
                        var isWin10 = sUserAgent.indexOf("Windows NT 10.0") > -1 || sUserAgent.indexOf("Windows 10") > -1;
                        if (isWin10) return "Win10";
                    }
                    return "other";
                }
                alert("您的操作系统是：" + detectOS());
    
                //判断是手机还是电脑，什么浏览器，手机操作系统
                var browser = function () {
                    var ua = navigator.userAgent;
                    isWindowsPhone = /(?:Windows Phone)/.test(ua);
                    isSymbian = /(?:SymbianOS)/.test(ua);
                    isAndroid = /(?:Android)/.test(ua);
    
                    isFireFox = /(?:Firefox)/.test(ua);
    
                    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua));
                    isPhone = /(?:iPhone)/.test(ua) && !isTablet;
    
                    isChrome = /(?:Chrome|CriOS)/.test(ua);
    
                    isMobile = isWindowsPhone || isSymbian || isAndroid || isPhone;
                    isPc = !isMobile;
                    return {
                        isMobile: isMobile,
                        isPc: isPc,
                        isPhone: isPhone,//苹果
                        isWindowsPhone: isWindowsPhone,//微软手机
                        isSymbian: isSymbian,//班赛
                        isAndroid: isAndroid,//安卓
                        isFireFox: isFireFox,
                        isChrome: isChrome,
                        isTablet: isTablet//平板
                    };
                }();
                var visit_type;//手机or电脑or平板
                var userBrowser;//浏览器
                var userOs;//操作系统
    
                if (browser.isPc) {
                    //电脑
                    visit_type = 'pc';
                    //如果是电脑则判断其操作系统
                    userOs = detectOS();
                    if (browser.isFireFox) {
                        userBrowser = '火狐';
                    } else if (browser.isChrome) {
                        userBrowser = '谷歌';
                    } else {
                        userBrowser = 'ie';
                    }
                } else if (browser.isMobile) {
                    //手机
                    visit_type = '手机';
                    userBrowser = '手机应用'
                    if (browser.isPhone) {
                        userOs = '苹果';
                    } else if (browser.isWindowsPhone) {
                        userOs = '微软';
                    } else if (browser.isSymbian) {
                        userOs = '塞班';
                    } else if (browser.isAndroid) {
                        userOs = '安卓';
                    } else {
                        userOs = '其他';
                    }
                } else if (browser.isTablet) {
                    visit_type = '平板';
                    userOs = '其他';
                    userBrowser = '其他';
                } else {
                    visit_type = '其他';
                    userOs = '其他';
                    userBrowser = '其他';
                }
                //现在就拿到了所以信息，异步请求到后台生成一条浏览记录
                entity = { productId: proId, userId: userId, visit_type: visit_type, userOs: userOs, userBrowser: userBrowser }
                debugger
                //此方法可以拿到后台添加一条浏览记录，并将产品的浏览数+1
                $.ajax({
                    type: 'post',
                    url: "/api/farmhouse-product-front/productVisit/submit",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(entity),
                    //crossDomain: true,
                    success: function (responseObj) {
                        debugger
                    }
                })
            }