JavaScript判断系统和浏览器

陈一尼

在做项目的时候，Web端需要适配移动端，且部分参数需要判断对应系统或浏览器。
在IOS中，因为高版本的系统Safari浏览器采用了Mac的内核，所以导致普通的判断无法识别到对应系统。
(userAgent.match(/(Macintosh)/) && navigator.maxTouchPoints > 1) 能有效识别是apple产品，且是触屏的，通过此方法能识别高版本的IOS_Safari。
Navigator 接口的 maxTouchPoints 只读属性返回当前设备支持的最大同时触摸接触点数。

1. if (navigator.maxTouchPoints > 1) {
2.   // 浏览器支持多点触控
3. }

复制代码

识别对应系统和浏览器代码：

1. /* 匹配系统 */
2. function detectDeviceType(userAgent) {
3.   if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent) || (userAgent.match(/(macintosh)/) && navigator.maxTouchPoints > 1)) {
4.     return 'iOS';
5.   }
6.   else if (/android/i.test(userAgent)) {
7.     return 'Android';
8.   }
9.   else {
10.     return 'PC';
11.   }
12. }
13. /* 匹配浏览器 */
14. function detectBrowser(userAgent) {
15.   if (/safari/i.test(userAgent) && !/(chrome|crios|crmo|edg|edge)/i.test(userAgent)) {
16.     return 'Safari';
17.   } else if (/(chrome|crios|crmo)/i.test(userAgent) && !/(edg|edge)/i.test(userAgent)) {
18.     return 'Chrome';
19.   } else if (/(edg|edge|edgios|edga|edg)/i.test(userAgent)) {
20.     return 'Edge';
21.   } else if (/(firefox|fxios)/i.test(userAgent)) {
22.     return 'Firefox';
23.   } else if (/xiaomi/i.test(userAgent)) {
24.     return 'Xiaomi';
25.   } else if (/huawei/i.test(userAgent)) {
26.     return 'Huawei';
27.   } else if (/samsung/i.test(userAgent)) {
28.     return 'Samsung';
29.   } else {
30.     return 'Other';
31.   }
32. }
33. /*系统_浏览器*/
34. function joinSource() {
35.   const userAgent = navigator.userAgent.toLowerCase();
36.   var sys = detectDeviceType(userAgent);
37.   if (sys == "PC") {
38.     return "PC_Browser";
39.   } else if (sys == "Android") {
40.     return sys + "_" + detectBrowser(userAgent);
41.   } else if (sys == "iOS") {
42.     return sys + "_" + detectBrowser(userAgent);
43.   }
44. }

复制代码

 

来源:https://www.cnblogs.com/LaoPaoEr/p/18362457
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！