同一链接如何PC、手机展示两套应用

在实际项目中，为了兼容多终端体验，我们常常希望通过同一个链接来为不同设备提供不同版本的页面。例如，在 PC 端展示完整的 Web 应用，而在手机端展示轻量化、优化的 H5 应用。如何实现这一目标？

本文将介绍两种主要方案：

服务端用户代理检测重定向
客户端响应式加载或动态模块切换

服务端检测用户代理

原理

通过服务器检测 HTTP 请求头中的 User-Agent，根据设备类型选择性地返回不同版本的页面。这样，同一个 URL 在 PC 和手机访问时，会由服务器根据检测结果决定返回哪个 HTML 模板。

示例（Node.js + Express）

下面是一个简单的示例，通过 Express 中间件检测 User-Agent 并重定向到不同页面。

const express = require('express');
const app = express();

// 模拟 PC 与 H5 页面（假设它们分别位于 /web 和 /h5）
app.get('/', (req, res) => {
  const userAgent = req.headers['user-agent'].toLowerCase();
  if (/mobile|android|iphone|ipad|phone/i.test(userAgent)) {
    // 如果检测到移动设备，则重定向到 H5 版本
    res.send('<h1>欢迎来到手机 H5 应用</h1>');
  } else {
    // 否则返回 PC 版本
    res.send('<h1>欢迎来到 PC 版 Web 应用</h1>');
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在上面的代码中，当用户访问根路径 / 时，服务器会检测 User-Agent，如果检测到移动设备，则返回 H5 应用，否则返回 Web 应用。这种方案的优点是简单直观，缺点是需要后端参与，并且 User-Agent 检测并不总是百分之百准确。

客户端动态加载

原理

另一种方案是由客户端根据屏幕宽度或设备信息动态加载不同的资源或模块。这样，同一个 URL 返回统一的 HTML 页面，但在页面加载后通过 JavaScript 判断设备类型，再决定加载哪一套模块或样式。

示例（纯前端方案）

在返回的 HTML 中包含一段脚本，用于检测设备并动态加载对应的脚本或样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>同链接多终端方案</title>
  <script>
    // 简单判断：使用 window.innerWidth 判断
    function loadApp() {
      if (window.innerWidth < 768) {
        // 手机端加载 H5 版本模块或样式
        var script = document.createElement('script');
        script.src = 'h5-app.js';
        document.body.appendChild(script);
        // 也可以加载特定的 CSS
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'h5-app.css';
        document.head.appendChild(link);
      } else {
        // PC 端加载 Web 版本模块或样式
        var script = document.createElement('script');
        script.src = 'web-app.js';
        document.body.appendChild(script);
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'web-app.css';
        document.head.appendChild(link);
      }
    }
    window.addEventListener('DOMContentLoaded', loadApp);
  </script>
</head>
<body>
  <h1>加载中...</h1>
</body>
</html>

另外可以使用

在这个方案中：

同一个链接返回一个基本的 HTML 框架；
页面加载后，JavaScript 根据 window.innerWidth 判断设备类型，再动态加载对应版本的资源（JavaScript 和 CSS）；
优点在于后端不需要做重定向，但缺点是用户在首次加载时会看到”加载中…”的闪屏效果，且判断逻辑可能需要更完善（例如结合 User-Agent）。

CSS 媒体查询方案

除了服务端和 JavaScript 动态加载方案，还可以利用 CSS 媒体查询，根据设备屏幕宽度加载不同的样式，从而达到同一链接下展示不同 UI 风格的目的。

基本原理

CSS 媒体查询允许我们根据设备的屏幕尺寸、分辨率、方向等条件应用不同的 CSS 样式。例如，可以定义一套针对 PC 的样式，以及一套针对手机的样式，利用媒体查询在不同屏幕下切换样式。

示例代码

在 HTML 中引入统一的 HTML 框架，通过媒体查询加载不同样式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>同链接多终端方案</title>
  <script>
    function loadApp() {
      if (window.innerWidth < 768) {
        // 手机端加载 H5 应用资源
        const script = document.createElement('script');
        script.src = 'h5-app.js';
        document.body.appendChild(script);
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'h5-app.css';
        document.head.appendChild(link);
      } else {
        // PC 端加载 Web 应用资源
        const script = document.createElement('script');
        script.src = 'web-app.js';
        document.body.appendChild(script);
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'web-app.css';
        document.head.appendChild(link);
      }
    }
    window.addEventListener('DOMContentLoaded', loadApp);
  </script>
</head>
<body>
  <h1>加载中...</h1>
</body>
</html>