java获取设备类型_前端获取手机及设备类型-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36050671/article/details/114115896

这篇博客介绍了如何使用JavaScript根据`userAgent`信息判断设备类型，包括苹果的iPhone、iPod、iPad（包括iPad Pro）以及Android设备。还提到了在最新iPad Pro上由于与MAC系统相同的问题，通过浏览器信息无法区分，需要依赖设备是否支持触摸来判断。同时，文章提供了区分微信浏览器以及判断是否为手机端的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

苹果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

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

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

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

参考链接：

安卓类型

大部分安卓的浏览器信息都有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