码迷,mamicode.com
首页 > 移动开发 > 详细

前端 获取手机及设备类型

时间:2020-07-07 09:40:26      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:article   客户   string   浏览器信息   pos   mob   技术   evel   eve   

上一篇 前端 浏览器所在客户端信息,有浏览器信息后,以下是区分手机的详细类型

虽然没难度,但是记录下来,方便后续无脑复制:

苹果APP类型

1   // iOS
2   isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
3   isIPod = (userAgent: string) => /ipod/i.test(userAgent);
4   isIPad = (userAgent: string) => /iPad/i.test(userAgent);
5   public isIOS = (userAgent: string) => this.isIPhone(userAgent) || this.isIPod(userAgent) || this.isIPad(userAgent);

注:最新ipad pro版本是MAC系统,无法通过浏览器信息来区分ipad pro与MAC,详细浏览器信息:

 1 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15 

已经有很多开发吐槽过,苹果的这个BUG:https://developer.apple.com/forums/thread/119186

所以,除非苹果修复这个设计问题,否则我们只能绕道规避。

目前大家区分ipad pro与MAC的方法是,判断设备是否支持触摸

1  isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;

参考链接:

https://stackoverflow.com/questions/57776001/how-to-detect-ipad-pro-as-ipad-using-javascript

https://stackoverflow.com/questions/57765958/how-to-detect-ipad-and-ipad-os-version-in-ios-13-and-up

安卓类型

大部分安卓的浏览器信息都有android字段

1   // android
2   public isAndroid = (userAgent: string) => /android/i.test(userAgent);

微信浏览器

1   // 微信
2   public isWechat = (userAgent: string) => /micromessenger/i.test(userAgent);
3   public isAppWechat = (userAgent: string) => this.isWechat(userAgent) && !/windowswechat/i.test(userAgent);

是否是手机端

添加mobile作为补充,当然直接使用mobile问题也不大

1   // 手机
2   public isMobile = (userAgent: string) => this.isAndroid(userAgent) || this.isIOS(userAgent) || /mobile/i.test(userAgent);

userAgent的字段介绍,可参考 其它博客浏览器的常见User Agent 各字段的解释

完整代码(可直接复制,不谢):

技术图片
 1 declare type UserAgentProvider = {
 2   isIOS: (userAgent: string) => void;
 3   isAndroid: (userAgent: string) => void;
 4   isMobile: (userAgent: string) => void;
 5   isWechat: (userAgent: string) => void;
 6 };
 7 
 8 class Index implements UserAgentProvider {
 9   // iOS
10   isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
11   isIPod = (userAgent: string) => /ipod/i.test(userAgent);
12   isIPad = (userAgent: string) => /iPad/i.test(userAgent) || /Macintosh/i.test(userAgent);
13   isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;
14   public isIOS = (userAgent: string) =>
15     this.isIPhone(userAgent) ||
16     this.isIPod(userAgent) ||
17     this.isIPad(userAgent)||
18     this.isIPadPro(userAgent);
19 
20   // android
21   public isAndroid = (userAgent: string) => /android/i.test(userAgent);
22 
23   // 手机
24   public isMobile = (userAgent: string) => this.isAndroid(userAgent) || this.isIOS(userAgent) || /mobile/i.test(userAgent);
25 
26   // 微信
27   public isWechat = (userAgent: string) => /micromessenger/i.test(userAgent);
28   public isAppWechat = (userAgent: string) => this.isWechat(userAgent) && !/windowswechat/i.test(userAgent);
29 }
30 
31 export default new Index();
View Code

 

关键字:iPadpro MAC userAgent、区分iPad pro与MAC

前端 获取手机及设备类型

标签:article   客户   string   浏览器信息   pos   mob   技术   evel   eve   

原文地址:https://www.cnblogs.com/kybs0/p/13238110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!