網站開發：根據 User-Agent 識別設備類型，返回對應首頁（手機/平板/PC）

實現「同一域名、不同設備顯示不同首頁」的核心是**解析 HTTP 請求標頭中的 `User-Agent` 字串**。

User-Agent 典型特徵

實作方式

Nginx 反向代理層（高效能、無侵入應用）

# nginx.conf
map $http_user_agent $device_type {
    default "pc";
    "~*iPhone|Android.*Mobile" "mobile";
    "~*iPad|Android.*Tablet" "tablet";
}

server {
    location / {
        # 重寫根路徑
        rewrite ^/$ /index-$device_type.html last;
        # 或 proxy_pass 到不同 upstream
    }
}

應用層（Java/Spring Boot 範例）

@GetMapping("/")
public String index(HttpServletRequest request) {
    String ua = request.getHeader("User-Agent").toLowerCase();
    if (ua.contains("iphone") || (ua.contains("android") && ua.contains("mobile"))) {
        return "mobile/index"; // 手機首頁模板
    } else if (ua.contains("ipad") || (ua.contains("android") && !ua.contains("mobile"))) {
        return "tablet/index"; // 平板首頁
    }
    return "pc/index"; // PC 首頁
}

響應式設計（現代主流替代方案）

**單一 HTML + CSS Media Queries / Bootstrap / Tailwind 響應式佈局**，根據螢幕寬度自動適配，**無需伺服器端判斷 UA**，維護成本最低、SEO 最友好（單一 URL）。

建議選擇

• **新專案**：優先採用**響應式設計**（RWD），一套代碼全端適配。
• **舊專案/業務差異大**：手機/PC 頁面結構完全不同（如精簡版 vs 功能全版），才使用 UA 判斷分發不同模板。
• **注意**：UA 可被偽造、iPadOS 預設偽裝桌面 UA，建議搭配 `viewport`、`CSS @media` 雙重保險。