前言

多語系網站常需依瀏覽器偏好語言自動導向對應語系頁面。本文整理 JavaScript 前端偵測與 PHP 後端偵測兩種做法，並說明優缺點與最佳實務。

JavaScript 前端偵測

透過 navigator.language（標準）或 navigator.userLanguage（IE 舊版）取得語言代碼（如 zh-TW、en-US）。

程式碼範例

<script>
// 取得瀏覽器語言（支援舊版 IE）
const lang = navigator.language || navigator.userLanguage; // 例："zh-TW"
console.log('瀏覽器語言：', lang);

// 簡易判斷：中文語系導向繁體中文頁
if (lang.startsWith('zh')) {
    // 避免重複導向造成迴圈
    if (!window.location.pathname.includes('/zh/')) {
        window.location.href = '/zh/index.php';
    }
}
</script>

優缺點

• ✅ 無需伺服器端運算，反應快
• ✅ 可在 SPA（單頁應用）動態切換語系
• ❌ 使用者可關閉 JS 導致失效
• ❌ 搜尋引擎爬蟲可能不執行 JS，影響 SEO

PHP 後端偵測

透過 $_SERVER['HTTP_ACCEPT_LANGUAGE'] 取得瀏覽器發送的 Accept-Language 標頭，格式如 zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7。

解析並取得首選語言

<?php
function getPreferredLanguage(): string
{
    $accept = $_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? 'en';
    // 簡易解析：取第一個語言代碼（忽略 q-value 排序）
    $langs = array_map('trim', explode(',', $accept));
    $first = $langs[0] ?? 'en';
    // 取主要語言代碼（如 zh-TW → zh）
    return strtolower(explode('-', $first)[0]);
}

$lang = getPreferredLanguage(); // 'zh', 'en', 'ja'...

// 導向對應語系頁面
$supported = ['zh', 'en', 'ja', 'ko'];
$target = in_array($lang, $supported) ? $lang : 'en';

if (!str_starts_with($_SERVER['REQUEST_URI'], "/$target/")) {
    header("Location: /$target" . $_SERVER['REQUEST_URI'], true, 302);
    exit;
}
?>

進階：完整解析 q-value 排序

<?php
function parseAcceptLanguage(string $header): array
{
    $parts = array_map('trim', explode(',', $header));
    $result = [];
    foreach ($parts as $part) {
        [$tag, $q] = array_pad(explode(';q=', $part), 2, 1.0);
        $result[] = ['lang' => strtolower(trim($tag)), 'q' => (float)$q];
    }
    usort($result, fn($a, $b) => $b['q'] <=> $a['q']);
    return array_column($result, 'lang');
}

$langs = parseAcceptLanguage($_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? 'en');
// $langs = ['zh-tw', 'zh', 'en-us', 'en']
?>

User-Agent 取得更多資訊

$_SERVER['HTTP_USER_AGENT'] 可取得瀏覽器、作業系統、裝置等資訊，常用於分析、相容性判斷或防爬蟲。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
echo "User-Agent: $ua";
// 範例輸出：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...
?>

最佳實務建議

1. 後端為主、前端為輔： PHP 導向確保 SEO 與無 JS 環境可用；JS 可在頁面載入後微調或提供語言切換器。
2. 提供手動切換： 永遠保留語言選單讓使用者自行選擇，並將選擇存入 Cookie/Session/資料庫，優先級高於瀏覽器偏好。
3. 避免無限導向： 導向前檢查目前路徑是否已為目標語系。
4. 快取策略： 多語系頁面需設定 Vary: Accept-Language 標頭，避免 CDN/Proxy 快取錯誤版本。

總結

結合 PHP 後端解析 Accept-Language 標頭與 JavaScript 即時偵測 navigator.language，並提供使用者手動切換機制，即可建立完善的多語系導向體驗。