JavaScript 偵測行動裝置並導向對應頁面：UserAgent 解析完整方案

需求場景

響應式設計無法滿足所有業務差異時，需在入口頁根據裝置類型導向專屬頁面（如 m.example.com 或 app下載頁）。

核心偵測邏輯

const browser = {
  versions: (() => {
    const u = navigator.userAgent;
    const app = navigator.appVersion;
    return {
      trident: u.includes('Trident'),           // IE 內核
      presto: u.includes('Presto'),             // Opera 內核
      webKit: u.includes('AppleWebKit'),        // WebKit 內核
      gecko: u.includes('Gecko') && !u.includes('KHTML'), // Firefox 內核
      mobile: /AppleWebKit.*Mobile/.test(u) || /AppleWebKit/.test(u), // 行動裝置
      ios: /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(u), // iOS
      android: u.includes('Android') || u.includes('Linux'), // Android
      iPhone: u.includes('iPhone') || u.includes('Mac'), // iPhone / QQ HD
      iPad: u.includes('iPad'),                 // iPad
      webApp: !u.includes('Safari')             // WebApp 無導航列
    };
  })(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

// 導向邏輯
const target = 'https://m.example.com'; // 行動版首頁
if (browser.versions.mobile || browser.versions.ios || browser.versions.android) {
  window.location.href = target;
}

現代替代方案

1. CSS Media Queries：純前端響應式，無需導向，SEO 友善。
2. Client Hints API：navigator.userAgentData（Chrome 89+）提供結構化裝置資訊，隱私更佳。
3. 伺服器端偵測：Nginx/Apache 依 User-Agent 直接 Rewrite，避免前端閃動。

UserAgent 解析庫推薦

• ua-parser-js：輕量、支援瀏覽器/引擎/OS/裝置型號解析。
• bowser：API 簡潔，TypeScript 友善。

注意事項

• UserAgent 可被偽造，不可作為安全驗證依據。
• 導向前建議提供「繼續留在桌面版」連結，尊重使用者選擇。
• 避免在單頁應用（SPA）中重整頁面，改用動態載入行動版組件。