WeChat Cross-Platform Compatibility: Platform & UA Detection for Mini Programs & Web Apps

Mini Program Platform Adaptation

In WeChat Mini Programs, the platform field in systemInfo identifies the current runtime platform. Developers use this field to tailor experiences for Android, HarmonyOS, and iOS on phones, and Windows, HarmonyOS PC, and Mac on desktops. For example, adjusting Tabbar bottom values to avoid conflicts with system navigation bars.

Phone scenario: complete logic must handle android, ohos, and ios.

PC scenario: complete logic must handle windows, ohos_pc, and mac.

Missing proper platform adaptation can cause white screens or UI chaos that block usage.

Recommended implementation: store device info in a global variable in app.js at launch.

// app.js
App({
  onLaunch() {
    // Store device info globally at startup
    this.device_info = getDeviceInfo()
  }
})

function getDeviceInfo() {
  const info = wx.getDeviceInfo()
  return {
    type: info.platform, // Platform value
    isAndroid: info.platform === 'android', // Quick Android check
    isIos: info.platform === 'ios', // Quick iOS check
    isOhos: info.platform === 'ohos', // Quick HarmonyOS Next check
    isPc: info.platform === 'windows' || info.platform === 'mac' || info.platform === 'ohos_pc', // Quick PC check
    isDevtool: info.platform === 'devtools' // Quick devtools check (only for developers)
  }
}

In page files, reference getApp().device_info for logic or setData for template binding.

// Page JS file
const app = getApp()
Page({
  onLoad: function() {
    console.log('Current device:', app.device_info.type)
    console.log('Is Android:', app.device_info.isAndroid)
    // Write to data for page logic
    this.setData({
      device_info: app.device_info
    })
  }
})

Web Application UA Adaptation

User-Agent (UA) strings sent by the WeChat client browser contain device type identifiers (iPhone, OpenHarmony, Android). Parsing UA lets developers load appropriate resources, adjust layouts, and tailor interactions per device.

Example UA strings for each platform:

iOS:

Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.65(0x1800412f) NetType/WIFI Language/zh_CN

Android:

Mozilla/5.0 (Linux; Android 12; Pixel 4 XL Build/SQ3A.220705.003.A1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/142.0.7444.102 Mobile Safari/537.36 MMWEBID/4681 MicroMessenger/8.0.65.2941(0x28004141) WeChat/arm64 Weixin GPVersion/1 NetType/WIFI Language/zh_CN ABI/arm64

HarmonyOS:

Mozilla/5.0 (Phone; OpenHarmony 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile MicroMessenger/8.0.13.33(0xf3800d21) Weixin NetType/WIFI Language/zh_CN MMWEBID/7944 MMWEBSDK/202511100006 XWEB/1140363

HarmonyOS PC:

Mozilla/5.0 (PC; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090a13) UnifiedPCOHOSWechat(0xf2b4100d) XWEB/2532 Flue

Windows PC:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090a13) UnifiedPCWindowsWechat(0xf2541510) XWEB/17071 Flue

Mac PC:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) MacWechat/3.8.7(0x13080712) UnifiedPCMacWechat(0xf26412f0) XWEB/16816 Flue

Phone detection must cover isAndroid, isHarmonyOS, and isIOS.

PC detection must cover isWindows, isHarmonyPC, and isMAC.

Missing UA adaptation leads to severe issues: mobile users may see a PC page prompting "Please visit on mobile".

Recommended getos function for robust UA parsing:

function getos() {
  const ua = window.navigator.userAgent.toLowerCase();

  const isWindows = ua.indexOf("windows") !== -1;
  const isHarmony = ua.indexOf("openharmony") !== -1;
  const isHarmonyPC = isHarmony && ua.indexOf("pc;") !== -1;
  const isRealIpadUA = ua.indexOf("ipad") !== -1;
  const isMaskedIpad = ua.indexOf("macintosh") !== -1 && navigator.maxTouchPoints > 1; // Disguised iPad: UA contains "macintosh" but supports touch (system thinks desktop mode)
  const isMac = ua.indexOf("macintosh") !== -1;

  return {
    isWechat: ua.indexOf("micromessenger") !== -1, // Is WeChat client browser
    isAndroid: ua.indexOf("android") !== -1 && !isHarmony, // Android phone, exclude Harmony
    isIphone: ua.indexOf("iphone") !== -1 || ua.indexOf("ipod") !== -1, // iPhone/iPod
    isHarmony: isHarmony && !isHarmonyPC, // Harmony phone (exclude Harmony PC)
    isIpad: isRealIpadUA || isMaskedIpad, // iPad or disguised Mac iPad
    isWindows, // Windows PC
    isHarmonyPC, // Harmony PC
    isMac, // Mac PC (also includes iPad in desktop mode)
    isPC: isMac || isWindows || isHarmonyPC // Broad PC: for deciding wide/desktop UI
  }
}

Usage pattern:

const os = getos()

if (os.isWechat) {
} // WeChat client browser logic

// Mobile logic
if (os.isAndroid) {
} // Android phone/tablet logic
if (os.isHarmony) {
} // HarmonyOS phone/tablet logic
if (os.isIphone) {
} // iPhone logic
if (os.isIpad) {
} // iPad logic

// PC logic
if (os.isHarmonyPC) {
} // HarmonyOS PC logic
else if (os.isMac) {
} // Mac logic
else if (os.isWindows) {
} // Windows logic

if (os.isPC) {
} // Desktop browser logic