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

雖然沒難度，但是記錄下來，方便后續無腦復制：

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

View Code

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

總結

以上是生活随笔為你收集整理的前端 获取手机及设备类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。