纯前端如何实现: 同一个链接，PC打开的是web应用，手机打开的是h5应用要在同一个链接中实现 PC 打开的是 Web

要在同一个链接中实现 PC 打开的是 Web 应用，手机打开的是 H5 应用，可以通过检测用户的设备类型来实现。

1. HTML

首先，我们需要一个基础的 HTML 结构，来加载我们的 JavaScript 代码进行设备检测。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Device Detection</title>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

2. JavaScript

接下来，我们在 script.js 文件中编写设备检测和重定向的逻辑。

document.addEventListener('DOMContentLoaded', () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;

  // 检测移动设备
  const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase());

  if (isMobile) {
    // 如果是移动设备，重定向到 H5 应用
    window.location.href = 'https://m.yourwebsite.com';
  } else {
    // 如果是 PC 设备，重定向到 Web 应用
    window.location.href = 'https://www.yourwebsite.com';
  }
});

HTML 部分：
- 创建一个简单的 HTML 页面，包含一个 script 标签来加载我们的 JavaScript 文件。
JavaScript 部分：
- 使用 navigator.userAgent 获取用户代理字符串，这个字符串包含了有关用户设备的信息。
- 使用正则表达式检测用户代理字符串中是否包含常见的移动设备标识符（如 android、iphone 等）。
- 如果检测到是移动设备，则将用户重定向到 H5 应用的 URL（例如 https://m.yourwebsite.com）。
- 如果检测到是 PC 设备，则将用户重定向到 Web 应用的 URL（例如 https://www.yourwebsite.com）。
URL 配置：
- 确保 https://m.yourwebsite.com 和 https://www.yourwebsite.com 分别指向你的 H5 应用和 Web 应用。
- 你也可以根据需要修改这些 URL。
用户体验：
- 重定向会导致页面重新加载，因此尽量在页面加载时尽早进行设备检测和重定向，以减少用户等待时间。
优化：
- 如果你的应用需要更复杂的设备检测（例如区分平板电脑和手机），可以进一步优化正则表达式或使用更高级的设备检测库。