前端获取手机及设备类型

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

苹果APP类型

// iOS
isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
isIPod = (userAgent: string) => /ipod/i.test(userAgent);
isIPad = (userAgent: string) => /iPad/i.test(userAgent);
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;

安卓类型

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

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

微信浏览器

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

是否是手机端

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

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

完整代码（可直接复制,不谢）:

declare type UserAgentProvider = {
  isIOS: (userAgent: string) => void;
  isAndroid: (userAgent: string) => void;
  isMobile: (userAgent: string) => void;
  isWechat: (userAgent: string) => void;
};

class Index implements UserAgentProvider {
  // iOS
  isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
  isIPod = (userAgent: string) => /ipod/i.test(userAgent);
  isIPad = (userAgent: string) => /iPad/i.test(userAgent) || /Macintosh/i.test(userAgent);
  isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;
  public isIOS = (userAgent: string) =>
    this.isIPhone(userAgent) ||
    this.isIPod(userAgent) ||
    this.isIPad(userAgent)||
    this.isIPadPro(userAgent);

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

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

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

export default new Index();

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_9405