前端 获取手机及设备类型
上一篇 前端 浏览器所在客户端信息,有浏览器信息后,以下是区分手机的详细类型
虽然没难度,但是记录下来,方便后续无脑复制:
苹果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;
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 // 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();
关键字:iPadpro MAC userAgent、区分iPad pro与MAC
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2019-07-07 C# 同步转异步 TaskCompletionSource
2019-07-07 C# 异步转同步 PushFrame