「JavaScript 开发」案例分享 · 检测客户终端浏览器和设备信息一、前期知识储备要想知道客户端用户使用了什么

🙏废话不多说系列，直接开整🙏

一、前期知识储备

要想知道客户端用户使用了什么设备，我们可以直接了解一下浏览器的 navigator 对象，包含了有关浏览器的信息，另外可以根据浏览器信息来推测用户的设备型号。如下：

（1）检测浏览器类型和版本 & 设备信息：

1. navigator.userAgent：得到客户端发送给服务器的 user-agent 的头部值。这个字符串包含了浏览器类型、版本、操作系统、CPU类型等信息。（但是，我有后来查了下火狐浏览器的开发手册，这种user-agent 不一定靠谱，他是可以被修改的，因此如果你想依赖它进行安全检测，可能需要其他的策略去处理。）
2. navigator.appCodeName：浏览器的代码名，例如 "Mozilla"。
3. navigator.appName：完整的浏览器名称，但通常也是 "Netscape"，因为历史原因。
4. navigator.appVersion：浏览器的版本信息。
5. navigator.platform：浏览器运行的操作系统平台。虽然这可以帮助你区分是 Windows、Mac 还是 Linux，但它并不直接告诉你是不是移动设备。
6. 特征检测：通过检测特定的 CSS 属性或 JavaScript API 的支持情况来推断设备类型或功能。例如，通过检查 window.orientation、window.touchEvents 等属性来判断是否为移动设备

<script>
    console.log( "浏览器终端：", navigator.userAgent);
    console.log( "浏览器的代码名：", navigator.appCodeName);
    console.log( "完整的浏览器名称：", navigator.appName);
    console.log( "浏览器版本信息：", navigator.appVersion);
    console.log( "设备信息：", window.navigator.platform);
</script>

输出结果：
浏览器终端： Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 HBuilderX
浏览器的代码名： Mozilla
完整的浏览器名称： Netscape
浏览器版本信息： 5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 HBuilderX
设备信息： Win32

二、具体使用案例

提前申明：前端的一些属性都是有版本和浏览器版本的兼容性问题，这里的文章列出的只是一些常规的检测手段，更加具体请查看附件API开发手册。

（1）检测是否为 PC端浏览器

function isPCBroswer() {
    let e = window.navigator.userAgent.toLowerCase(),
        t = "ipad" == e.match(/ipad/i),
        i = "iphone" == e.match(/iphone/i),
        r = "midp" == e.match(/midp/i),
        n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i),
        a = "ucweb" == e.match(/ucweb/i),
        o = "android" == e.match(/android/i),
        s = "windows ce" == e.match(/windows ce/i),
        l = "windows mobile" == e.match(/windows mobile/i);
    return !(t || i || r || n || a || o || s || l)
}

// 使用演示：得到当前执行此页面的浏览器类型
console.log(isPCBroswer())

（2）识别浏览器以及平台

function getPlatformInfo(){
    //运行环境是浏览器 
    let inBrowser = typeof window !== 'undefined';  
    //运行环境是微信 
    let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;  
    let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();  
    //浏览器 UA 判断 
    let UA = inBrowser && window.navigator.userAgent.toLowerCase();
    if(UA){
        let platforms = {
            IE: /msie|trident/.test(UA),
            IE9: UA.indexOf('msie 9.0') > 0,
            Edge: UA.indexOf('edge/') > 0,
            Android: UA.indexOf('android') > 0 || (weexPlatform === 'android'),
            IOS: /iphone|ipad|ipod|ios/.test(UA) || (weexPlatform === 'ios'),
            Chrome: /chrome\/\d+/.test(UA) && !(UA.indexOf('edge/') > 0),
        }
        for (const key in platforms) {
            if (platforms.hasOwnProperty(key)) {
                if(platforms[key]) return key
            }
        }
    }
}

// 使用演示
console.log(getPlatformInfo()); // 例如使用谷歌浏览器访问带有此脚本的网页，则会在控制台输出：Chrome

（3）检测用户是否使用的是 Apple 苹果设备

此处就是说，我们知道苹果Apple设备的标识性字符，我们就可以通过 navigator.platform 来标记进行清理几即可。

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice()); // true 是使用apple设备，false为非 apple设备

发射爱心.gif

🙏至此，非常感谢阅读🙏