JavaScript 判斷移動設備並跳轉的簡潔實現方案

前言

在響應式設計普及前，許多網站通過 User Agent 檢測判斷訪問設備類型，並將移動端用戶重定向至專屬頁面。本文介紹一種基於 navigator.userAgent 的輕量級檢測方案，代碼簡潔、兼容性好，適合快速接入舊項目。

核心檢測邏輯

通過解析 navigator.userAgent 字符串，識別主流移動終端特徵：

• iOS 設備：包含 iPhone、iPad、Mac OS X 等關鍵字
• Android 設備：包含 Android 或 Linux（兼容 UC 瀏覽器）
• 通用移動端：匹配 AppleWebKit.*Mobile.* 或單純 AppleWebKit
• 瀏覽器內核：Trident (IE)、Presto (Opera)、WebKit (Safari/Chrome)、Gecko (Firefox)

完整代碼實現

/**
 * 瀏覽器/設備檢測工具對象
 */
var browser = {
    versions: (function() {
        var u = navigator.userAgent;
        var app = navigator.appVersion;
        return {
            // 瀏覽器內核
            trident: u.indexOf('Trident') > -1,        // IE 內核
            presto: u.indexOf('Presto') > -1,          // Opera 內核
            webKit: u.indexOf('AppleWebKit') > -1,     // 蘋果/谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐內核
            
            // 設備類型
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), // 移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),                     // iOS 終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,       // Android 或 UC
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,           // iPhone 或 QQHD
            iPad: u.indexOf('iPad') > -1,                                        // iPad
            webApp: u.indexOf('Safari') == -1                                    // WebApp (無頭部底部)
        };
    })(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

/**
 * 移動端跳轉邏輯
 * @param {string} target - 目標跳轉地址
 */
function redirectMobile(target) {
    if (browser.versions.mobile || browser.versions.ios || browser.versions.android) {
        window.location.href = target;
    }
}

// 使用示例：將移動端用戶跳轉至 m.example.com
// redirectMobile('https://m.example.com');

進階優化建議

1. 更精準的正則匹配

// 推薦使用更嚴格的正則，減少誤判
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

2. 結合屏幕尺寸雙重判斷

function isMobileDevice() {
    var uaCheck = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    var widthCheck = window.innerWidth <= 768; // 斷點可根據設計調整
    return uaCheck && widthCheck;
}

3. 現代替代方案：CSS Media Queries

對於新項目，強烈建議採用響應式設計而非 UA 跳轉：

/* CSS 中直接適配 */
/* @media (max-width: 768px) { ... } */

/* 或使用 Picturefill 等庫實現響應式圖片 */

注意事項

• UA 可被偽造：不應用於安全敏感判斷
• 維護成本高：新設備、新瀏覽器不斷出現，正則需持續更新
• SEO 影響：跳轉可能導致搜索引擎抓取異常，建議使用響應式或動態服務
• 平板設備：iPad 等大屏設備體驗更接近桌面端，需單獨策略

總結

本文提供的 browser.versions 對象結構清晰，可輕松擴展更多檢測維度。但在現代 Web 開發中，優先考慮響應式布局（CSS Media Queries + Flex/Grid），僅在legacy項目或特殊業務場景下使用 UA 跳轉作為臨時方案。