Js判断当前打开页面的设备

在前端的开发的过程中，我们需要对页面进行部分浏览器的兼容或者对PC端与手机端进行判断，在这里记录一下自己在项目开发的过程中用到的对于设备的判断的方式。

// 在页面加载的时候，进行当前页面打开的设备的判断
$(document).ready(function () {
	// 设备判断显示
    let browser = {
        versions: (function () {
            let u = navigator.userAgent;
            let app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1,
                // IE内核
                isEdge: u.indexOf('Edge') > -1,
                //  Edgel浏览器
                presto: u.indexOf('Presto') > -1,
                // opera内核
                webKit: u.indexOf('AppleWebKit') > -1,
                // 苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                // 火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/),
                // 是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                // ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                // android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
                // 是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1,
                // 是否iPad
                webApp: u.indexOf('Safari') == -1 // 是否web应该程序，没有头部与底部
            };
        })()
    };
});

当项目中对某部分的浏览器进行一个特殊处理的时候，如我们前端最喜欢的IE浏览器，我们会对他做一些单独的处理

// IE浏览器兼容处理
if (window.navigator.userAgent.indexOf('MSIE') >= 1) {
	// 当用户使用IE浏览器打开网页时，进行友好的提醒
	let tipsStr = '您好，你还用什么鬼的IE浏览器，请换个浏览器再开我们的网页，谢谢！';
	alert(tipsStr); // 输出友好提示信息
}

根据以上的方式，对手机端和PC的区分也十分简单，可以通过判断是否为IOS和android以及是否为pad进行处理判断（WP什么的就忽略了吧）

// 判断打开页面的设备是PC还是移动端
if (browser.versions.ios || browser.versions.iPad || browser.versions.android) {
    $('body').addClass('mobile'); // 添加手机的标识，可以加载不同PC端的样式代码
    // 为android则添加对应的属性
    // （android与IOS在适配上会有一些不同的样式问题，所以可以单独对android的做标记处理）
    if (browser.versions.android) {
    	$('body').addClass('android'); // 添加标记
    }
}

说到PC与移动端的需求，也会延伸到了对于移动端的一些设备的判断。越来越多的网页设备会通过微信或者QQ来进行传递，可是微信内置浏览器其实会存在部分的限制，当需要考虑判断用户是否在微信浏览器中打开时，则可以通过以下的方式来进行判断处理

// 判断打开页面的设备是非为微信内置浏览器
let ua = navigator.userAgent.toLowerCase();
let is_weixin = (function() {
    return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
})();
if (is_weixin) {
    $(function() {
        console.log('当前页面为微信内置浏览器');
    });
}

这里为什么不把QQ内置浏览器拿出来说，因为QQ的内置浏览器与手机的QQ浏览器在判断的时候，会标识为同一个浏览器。可以通过以下的进行判断

// 判断打开页面的设备是非为QQ浏览器
let ua = navigator.userAgent.toLowerCase();
let is_QQ = (function() {
    return ua.match(/QQ/i) == "qq";
})();
if (is_weixin) {
    $(function() {
        console.log('当前页面为QQ浏览器');
    });
}