怎么实现同一个链接，PC 访问是 web 应用，而手机打开是一个 H5 应用？

要实现同一个链接在 PC 上打开 Web 应用，在手机上打开 H5 应用，可以利用用户代理检测和条件渲染。以下是常见的实现方法：

1. 服务器端检测用户代理

在服务器端，根据用户的请求头中的 User-Agent 字段来判断是 PC 还是手机访问，并返回不同的应用内容。

示例（Node.js/Express）

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

app.get("/", (req, res) => {
  const userAgent = req.headers["user-agent"];
  const isMobile = /mobile/i.test(userAgent);

  if (isMobile) {
    // 返回 H5 应用
    res.sendFile(__dirname + "/path/to/mobile/index.html");
  } else {
    // 返回 Web 应用
    res.sendFile(__dirname + "/path/to/pc/index.html");
  }
});

app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

2. 客户端检测用户代理

在客户端使用 JavaScript 检测用户设备类型，然后动态加载适合的内容或重定向到不同的页面。

示例（客户端 JavaScript）

if (/mobile/i.test(navigator.userAgent)) {
  // 重定向到 H5 应用
  window.location.href = "https://m.example.com";
} else {
  // 继续显示 Web 应用
}

3. 使用响应式设计

通过响应式设计来适配不同设备，所有内容都可以在同一 URL 上访问，但会根据设备的屏幕尺寸和特性显示不同的内容。

示例（CSS 媒体查询）

/* 手机样式 */
@media only screen and (max-width: 600px) {
  .web-app {
    display: none;
  }
  .h5-app {
    display: block;
  }
}

/* PC 样式 */
@media only screen and (min-width: 601px) {
  .web-app {
    display: block;
  }
  .h5-app {
    display: none;
  }
}

4. 使用框架或库

有些前端框架和库支持根据设备类型动态加载不同的内容。你可以利用这些工具进行设备适配。

示例（React）

import React from "react";
import { useMediaQuery } from "react-responsive";

const App = () => {
  const isMobile = useMediaQuery({ query: "(max-width: 600px)" });

  return <div>{isMobile ? <MobileApp /> : <PCApp />}</div>;
};