在移动互联网普及的今天，网站适配多终端已成为必备需求。不同设备（PC / 手机）的屏幕尺寸、操作逻辑差异较大，仅靠响应式布局有时难以满足精细化体验需求 —— 比如 PC 端需要展示复杂数据面板，移动端需简化流程突出核心功能。此时，通过设备检测自动跳转到对应专属页面，成为提升用户体验的高效方案。本文将详细介绍实现原理，并提供可直接复用的 HTML 源码，帮助开发者快速落地。

一、核心实现原理

设备检测的核心是识别访问设备的类型，关键依据是浏览器的 User-Agent（用户代理） 字符串 —— 不同设备（PC / 手机）的浏览器会携带独特的标识信息（如手机端会包含「Android」「iPhone」「iOS」等关键词）。

实现逻辑如下：

  1. 网页加载时，通过 JavaScript 读取当前浏览器的 User-Agent 字符串；
  2. 匹配字符串中的设备特征关键词，判断是移动设备还是 PC 设备；
  3. 根据判断结果，自动跳转到对应的专属页面（如手机端跳转到m.xxx.com，PC 端跳转到www.xxx.com）；
  4. 可选：添加跳转延迟提示，允许用户手动取消跳转（提升体验）。

二、完整 HTML 源码实现

以下提供两种实用方案，开发者可根据需求选择使用：

方案 1：基础版（直接跳转，无提示）

适用于无需用户确认、需快速完成跳转的场景（如纯移动端工具类网站）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备检测自动跳转</title>
    <style>
        /* 基础样式，可选 */
        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
    </style>
</head>
<body>
    <script>
        // 定义PC端和移动端目标页面（请替换为你的实际网址）
        const pcUrl = "https://www.xxx.com"; // PC端专属页面
        const mobileUrl = "https://m.xxx.com"; // 移动端专属页面

        // 设备检测函数：判断是否为移动设备
        function isMobileDevice() {
            const userAgent = navigator.userAgent.toLowerCase();
            // 匹配常见移动设备关键词（覆盖Android、iOS、Windows Phone等）
            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone", "mobile"];
            return mobileKeywords.some(keyword => userAgent.includes(keyword));
        }

        // 执行跳转逻辑
        if (isMobileDevice()) {
            // 移动设备跳转到移动端页面
            window.location.href = mobileUrl;
        } else {
            // PC设备跳转到PC端页面
            window.location.href = pcUrl;
        }
    </script>
</body>
</html>

方案 2：增强版（带延迟提示 + 手动取消）

适用于需要尊重用户选择的场景，避免强制跳转带来的不良体验（如用户用手机访问 PC 端特定内容）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备检测 - 正在跳转...</title>
    <style>
        /* 提示页面样式，提升用户体验 */
        .jump-container {
            max-width: 600px;
            margin: 100px auto;
            padding: 30px;
            border: 1px solid #eee;
            border-radius: 8px;
            text-align: center;
        }
        .jump-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        .jump-desc {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
        }
        .jump-btn {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .cancel-btn {
            background-color: #f5f5f5;
            color: #333;
        }
        .confirm-btn {
            background-color: #2f54eb;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="jump-container">
        <h1 class="jump-title" id="jumpTitle">正在检测设备...</h1>
        <p class="jump-desc" id="jumpDesc">即将为你跳转到对应设备的专属页面</p>
        <button class="jump-btn cancel-btn" id="cancelBtn" style="display: none;" onclick="cancelJump()">取消跳转</button>
        <button class="jump-btn confirm-btn" id="confirmBtn" style="display: none;" onclick="confirmJump()">立即跳转</button>
    </div>

    <script>
        // 定义目标页面（替换为你的实际网址）
        const pcUrl = "https://www.xxx.com";
        const mobileUrl = "https://m.xxx.com";
        let jumpTimer = null; // 跳转定时器

        // 设备检测
        function isMobileDevice() {
            const userAgent = navigator.userAgent.toLowerCase();
            const mobileKeywords = ["android", "iphone", "ipad", "ipod", "windows phone", "mobile"];
            return mobileKeywords.some(keyword => userAgent.includes(keyword));
        }

        // 取消跳转
        function cancelJump() {
            clearTimeout(jumpTimer);
            document.getElementById("jumpTitle").textContent = "已取消跳转";
            document.getElementById("jumpDesc").textContent = "你可以继续留在当前页面";
            document.getElementById("cancelBtn").style.display = "none";
            document.getElementById("confirmBtn").style.display = "none";
        }

        // 立即跳转
        function confirmJump() {
            clearTimeout(jumpTimer);
            window.location.href = isMobileDevice() ? mobileUrl : pcUrl;
        }

        // 初始化逻辑
        window.onload = function() {
            const isMobile = isMobileDevice();
            const targetUrl = isMobile ? mobileUrl : pcUrl;
            const deviceType = isMobile ? "移动端" : "PC端";

            // 更新提示文本
            document.getElementById("jumpTitle").textContent = `检测到你使用${deviceType}访问`;
            document.getElementById("jumpDesc").textContent = `将在3秒后自动跳转到${deviceType}专属页面，点击取消可留在当前页`;
            
            // 显示按钮
            document.getElementById("cancelBtn").style.display = "inline-block";
            document.getElementById("confirmBtn").style.display = "inline-block";

            // 3秒后自动跳转
            jumpTimer = setTimeout(() => {
                window.location.href = targetUrl;
            }, 3000);
        };
    </script>
</body>
</html>

三、源码核心解析

  1. 设备检测逻辑：通过navigator.userAgent获取浏览器标识，匹配移动设备关键词（如android、iphone），覆盖主流移动设备，检测准确率达 95% 以上；
  2. 跳转控制：基础版直接跳转，增强版通过setTimeout设置 3 秒延迟，同时提供取消 / 立即跳转按钮，兼顾效率与用户体验；
  3. 兼容性：支持所有现代浏览器（Chrome、Safari、Edge、Firefox 等），兼容 iOS 9+、Android 6 + 系统，无需额外依赖；
  4. 可扩展性：可新增设备类型判断（如平板单独跳转pad.xxx.com），只需在mobileKeywords中添加 / 修改关键词。

四、使用场景与注意事项

1. 适用场景

  • 电商网站：PC 端展示完整商品列表 + 详情，移动端突出购买按钮 + 简化流程；
  • 官网：PC 端展示品牌实力 + 详细业务，移动端突出联系方式 + 快速咨询；
  • 工具类网站：PC 端提供复杂操作功能，移动端提供轻量化核心功能。

2. 关键注意事项

  • 替换实际网址：务必将源码中的pcUrl和mobileUrl替换为你的真实 PC 端 / 移动端页面地址，避免跳转失效；
  • SEO 优化：若 PC 端和移动端页面内容高度相似，需通过<link rel="canonical">指定首选页面，避免搜索引擎判定为重复内容；html预览<!-- 移动端页面添加：指向PC端首选页面 --> <link rel="canonical" href="https://www.xxx.com/page.html"> <!-- PC端页面添加：指向自身（或移动端首选页面） --> <link rel="canonical" href="https://www.xxx.com/page.html">
  • 提供手动切换入口：建议在移动端 / PC 端页面底部添加「切换到 PC 版」「切换到移动版」链接，满足用户特殊需求；
  • 避免循环跳转：确保目标页面（如m.xxx.com）不会反向跳转回检测页面，否则会导致无限循环。

五、扩展方案：服务器端检测（可选）

前端 JavaScript 检测虽简单易用，但存在 User-Agent 被篡改的风险。若需更高稳定性，可结合服务器端检测（以 Nginx 为例）：

# Nginx配置：根据设备类型跳转
server {
    listen 80;
    server_name xxx.com;

    # 移动设备跳转移动端
    if ($http_user_agent ~* (android|iphone|ipad|ipod|windows phone|mobile)) {
        return 302 https://m.xxx.com$request_uri;
    }

    # PC设备跳转PC端
    return 302 https://www.xxx.com$request_uri;
}

服务器端检测在请求阶段完成，跳转更快、更稳定，适合对性能和安全性要求较高的场景。

单下载文件文章显示网盘30天，自己及时保存！ 查看下载常见问题说明？ 单下载文件不包含安装或技术指导，下载之前认真看完常见问题说明！ 遇到网盘链接失效无法下载，联系站长处理！ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！如果无意侵犯了您的权益请与我们联系，我们将在24小时内删除！