前端 獲取手機及設備類型

上一篇 前端 瀏覽器所在客戶端信息，有瀏覽器信息後，以下是區分手機的詳細類型

雖然沒難度，但是記錄下來，方便後續無腦複製：

蘋果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();

關鍵字：iPadpro MAC userAgent、區分iPad pro與MAC