微信小程序开发web页面进行UA适配的方法

admin

创建获取UA的代码函数：

1. function getos() {
   
2.     const ua = window.navigator.userAgent.toLowerCase();
   
3. 
   
4.     const isWindows = ua.indexOf("windows") !== -1;
   
5. 
   
6.     const isHarmony = ua.indexOf("openharmony") !== -1;
   
7.     const isHarmonyPC = isHarmony && ua.indexOf("pc;") !== -1;
   
8. 
   
9.     const isRealIpadUA = ua.indexOf("ipad") !== -1;
   
10.     const isMaskedIpad = ua.indexOf("macintosh") !== -1 && navigator.maxTouchPoints > 1;  // 伪装 iPad: UA 包含 "macintosh" 但支持触控 (系统认为是桌面模式)
    
11.     const isMac = ua.indexOf("macintosh") !== -1;
    
12. 
    
13.     return {
    
14.         isWechat: ua.indexOf("micromessenger") !== -1,  // 是否为微信客户端浏览器
    
15. 
    
16.         isAndroid: ua.indexOf("android")!==-1 && !isHarmony,  // Android 手机，排除 Harmony
    
17.         isIphone: ua.indexOf("iphone")!==-1|| ua.indexOf("ipod")!==-1,  // Iphone 手机等移动设备
    
18.         isHarmony: isHarmony && !isHarmonyPC,  // Harmony 手机 (排除 Harmony PC)
    
19.         isIpad: isRealIpadUA || isMaskedIpad,  // iPad 或 伪装 Mac 的 iPad
    
20. 
    
21.         isWindows,      // Windows 电脑
    
22.         isHarmonyPC,    // 鸿蒙 PC
    
23.         isMac,          // Mac 电脑 (也包含桌面模式的 iPad)
    
24. 
    
25.         isPC: isMac || isWindows || isHarmonyPC  // 广义 PC：用于判断是否展示宽屏/桌面版 UI
    
26.     };
    
27. }

复制代码

使用时：

1. const os  = getos()
   
2. 
   
3. if (os.isWechat) {}       // 微信客户端浏览器处理逻辑
   
4. 
   
5. // 移动端处理逻辑
   
6. 
   
7. if (os.isAndroid) {}      // Android 手机、平板处理逻辑
   
8. if (os.isHarmony) {}      // HarmonyOS 手机、平板处理逻辑
   
9. if (os.isIphone) {}       // Iphone 手机处理逻辑
   
10. if (os.isIpad) {}         // iPad 手机处理逻辑
    
11. 
    
12. // PC处理逻辑
    
13. 
    
14. if (os.isHarmonyPC) {}    // HarmonyOS PC处理逻辑
    
15. else if (os.isMac) {}     // Mac处理
    
16. else if (os.isWindows) {} // windows处理
    
17. 
    
18. if (os.isPC) {}           // 桌面版浏览器处理逻辑

复制代码