JS获取系统和浏览器信息

声明&＃xff1a;全文手撸代码&＃xff0c;移动端部分场景未经完全测试。

&＃x1f41e; 放弃兼容 IE 浏览器&＃xff1b;且仅支持识别主流浏览器&＃xff0c;不能精确 识别国产浏览器&＃xff01;当然&＃xff0c;有兴趣的话可以拓展 UA 标识来识别更多浏览器。

&＃x1f4a1; 源码仓库地址&＃xff1a; GITEE.COM

系统定义

&＃39;use strict&＃39;;
function _OS(name, identifier) {this.name &＃61; name;this.identifier &＃61; identifier;
}
_OS.prototype.getVersion &＃61; () &＃61;> &＃39;&＃39;;// Apple device 苹果设备
const getAppleVersion &＃61; (ua) &＃61;> {const [versionInfo] &＃61; ua.match(/ [0-9]&＃43;(_|.)?[0-9]*(_|.)?[0-9]*/gi);const osVersion &＃61; versionInfo?.replaceAll(&＃39;_&＃39;, &＃39;.&＃39;)?.trim();return osVersion || &＃39;&＃39;;
};// iOS
const iOS &＃61; new _OS(&＃39;iOS&＃39;, [&＃39;iPhone&＃39;, &＃39;iPhone OS&＃39;]);
iOS.getVersion &＃61; getAppleVersion;
// iPad
const iPadOS &＃61; new _OS(&＃39;iPad&＃39;, [&＃39;iPad&＃39;]);
iPadOS.getVersion &＃61; getAppleVersion;
// MacOS
const MacOS &＃61; new _OS(&＃39;Mac OS&＃39;, [&＃39;Macintosh&＃39;, &＃39;Mac OS&＃39;]);
MacOS.getVersion &＃61; getAppleVersion;// Windows PC
const windowsOS &＃61; [{name: &＃39;10&＃39;,identifier: [&＃39;10&＃39;, &＃39;10.0&＃39;]},{name: &＃39;7&＃39;,identifier: [&＃39;6.1&＃39;]},{name: &＃39;8&＃39;,identifier: [&＃39;6.3&＃39;]},{name: &＃39;XP&＃39;,identifier: [&＃39;5.1&＃39;]}
];
const Windows &＃61; new _OS(&＃39;Windows&＃39;, [&＃39;Windows&＃39;]);
Windows.getVersion &＃61; (ua) &＃61;> {const [versionInfo] &＃61; ua.match(/ ?Windows NT [0-9]&＃43;.?[0-9]*/g);const osVersion &＃61; versionInfo?.replaceAll(&＃39;Windows NT&＃39;, &＃39;&＃39;)?.trim();const matchVersion &＃61; windowsOS.find(({ identifier }) &＃61;> identifier.some((id) &＃61;> id &＃61;&＃61;&＃61; osVersion))?.[&＃39;name&＃39;];return matchVersion || &＃39;&＃39;;
};const Android &＃61; new _OS(&＃39;Android&＃39;, [&＃39;Android&＃39;]);
Android.getVersion &＃61; (ua) &＃61;> {const [versionInfo] &＃61; ua.match(/ ?Android [0-9]&＃43;.?[0-9]*/g);const osVersion &＃61; versionInfo?.replaceAll(&＃39;Android&＃39;, &＃39;&＃39;)?.trim();return osVersion || &＃39;&＃39;;
};const Linux &＃61; new _OS(&＃39;Linux&＃39;, [&＃39;Linux&＃39;]);const systems &＃61; [iOS, iPadOS, MacOS, Windows, Android, Linux];export { systems as default, iOS, iPadOS, MacOS, Windows, Android, Linux };


浏览器定义

&＃39;use strict&＃39;;
function _Browser(name, identifier) {this.name &＃61; name;this.identifier &＃61; identifier;
}// 获取版本默认方式
_Browser.prototype.getVersion &＃61; function (ua) {const { identifier &＃61; &＃39;&＃39; } &＃61; this;const [versionInfo] &＃61; ua.match(new RegExp(&＃96;(Version|${identifier})\/[0-9]&＃43;(\.?[0-9]*)*&＃96;, &＃39;gi&＃39;)) || [];const [_versionInfo] &＃61; (versionInfo||&＃39;&＃39;).trim().split(&＃39; &＃39;); //如果同时存在 Version 和 identifier 时const [, version] &＃61; (_versionInfo||&＃39;&＃39;).trim().split(&＃39;/&＃39;);return (version ?? &＃39;&＃39;).trim();
};
const Firefox &＃61; new _Browser(&＃39;Firefox&＃39;, &＃39;Firefox&＃39;);
const Opera &＃61; new _Browser(&＃39;Opera&＃39;, &＃39;OPR&＃39;);
const MicrosoftEdge &＃61; new _Browser(&＃39;Microsoft Edge&＃39;, &＃39;Edg&＃39;);
const Edge &＃61; new _Browser(&＃39;Edge&＃39;, &＃39;Edge&＃39;);
const Safari &＃61; new _Browser(&＃39;Safari&＃39;, &＃39;Safari&＃39;);
const Chrome &＃61; new _Browser(&＃39;Chrome&＃39;, &＃39;Chrome&＃39;);const browsers &＃61; [Firefox, Opera, MicrosoftEdge, Edge, Chrome, Safari];
export { browsers as default, Firefox, Opera, MicrosoftEdge, Edge, Safari, Chrome };


操作系统和浏览器信息获取

import browsers from &＃39;./browsers&＃39;;
import systems from &＃39;./systems&＃39;;/*** &＃64;description 获取操作系统信息* &＃64;returns {Object}*/
export const getOSInfo &＃61; () &＃61;> {const { userAgent } &＃61; navigator;const osInfo &＃61; systems.find(({ identifier }) &＃61;> identifier.some((id) &＃61;> userAgent.includes(id)));const osVersion &＃61; osInfo.getVersion(userAgent);return {osName: osInfo.name,osVersion};
};
/*** &＃64;description 获取浏览器信息* &＃64;returns {Object}*/
export const getBrowserInfo &＃61; () &＃61;> {const { userAgent } &＃61; navigator;const browserInfo &＃61; browsers.find(({ identifier }) &＃61;> userAgent.includes(identifier));const browserVersion &＃61; browserInfo.getVersion(userAgent); // 系统名称return {browserName: browserInfo.name,browserVersion};
};/*** &＃64;description 判断是否移动设备* &＃64;returns {Boolean} true: 移动端 & false: PC 端*/
export const isMobile &＃61; () &＃61;> {const isMatch &＃61; !!window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return isMatch;
};/*** &＃64;description 获取全部设备信息* &＃64;returns {Object}*/
export const getDeviceInfo &＃61; () &＃61;> {return {...getOSInfo(),...getBrowserInfo(),isMobile: isMobile()};
};export { getDeviceInfo as default };

应用

在 Javascript 模块中

import getDeviceInfo from &＃39;browser&＃39;;const deviceInfo &＃61; getDeviceInfo();console.log(deviceInfo);
// { osName: string, osVersion: string, browserName: string, browserVersion: string, isMobile: boolean }


在 HTML 中

裸导入配置 (仅 Chrome、Edge 支持)
在 HTML 的 script 标签中可以通过配置路径的方式实现裸导入 (类似于定义别名而不用通过路径引入)

• script 标签 type 设置为 importmap
• 标签内部配置模块的导入标识及文件路径

<script type&＃61;"importmap">{ "imports": { "browser": "./lib/index.js" } }script>


完整代码

DOCTYPE html>
<html lang&＃61;"zh-CN"><head><meta charset&＃61;"UTF-8" /><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge" /><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0" /><title>Documenttitle>head><body>body><script type&＃61;"importmap">{ "imports": { "browser": "./lib/index.js" } }script><script type&＃61;"module">import getDeviceInfo from &＃39;browser&＃39;;const { osName, osVersion, browserName, browserVersion } &＃61; getDeviceInfo();window.addEventListener(&＃39;load&＃39;, () &＃61;> {document.write(&＃96;${osName}: ${osVersion}
${browserName}: ${browserVersion}&＃96;);});console.log(getDeviceInfo());script>
html>


React 三方库

react-device-detect

npm i react-device-detect


use-mobile-detect-hook

npm install use-mobile-detect-hook