前端获取手机及设备类型 / 开普饭

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

苹果APP类型

1   // iOS2   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;

PS：如果是服务端渲染，navigator获取不了，所以对ipad pro无法区分。放弃治疗~

参考链接：

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   // android2   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   // iOS10   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   // android21   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

前端 获取手机及设备类型

相关推荐

前端获取手机及设备类型