如何实现PC打开是Web应用、手机打开是H5应用

在某些场景下，我们希望通过同一个链接，用户在PC端打开时可以访问一个Web应用，而在移动设备上则显示为一个H5应用。为此，我们可以通过检测用户设备类型来动态调整网页的内容和布局。以下是三种常见的实现方式：

1.1 使用服务器端逻辑

通过服务器端来判断用户的设备类型可以在请求进入服务器时就决定要返回的内容。我们可以通过解析User-Agent字符串来识别请求的设备是PC还是移动设备。

1.1.1 示例代码 (Node.js + Express)

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

app.get('/', (req, res) => {
  if (/Mobi/i.test(req.headers['user-agent'])) {
    // 如果是移动设备，则返回H5版本
    res.sendFile(__dirname + '/mobile.html');
  } else {
    // 如果是桌面设备，则返回Web应用版本
    res.sendFile(__dirname + '/desktop.html');
  }
});

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

在这个示例中，服务器会检查用户的User-Agent，如果检测到是移动设备，则返回mobile.html，否则返回desktop.html。

1.2 使用客户端JavaScript

另一种方法是使用客户端JavaScript来检测设备类型。通过navigator.userAgent可以判断设备类型，并根据结果动态加载不同的资源。

1.2.1 示例代码 (JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive App</title>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      if (/Mobi/i.test(navigator.userAgent)) {
        // 如果是移动设备，则加载H5版本的CSS和JS
        document.write('<link rel="stylesheet" href="/mobile.css">');
        document.write('<script src="/mobile.js"></script>');
      } else {
        // 如果是桌面设备，则加载Web应用版本的CSS和JS
        document.write('<link rel="stylesheet" href="/desktop.css">');
        document.write('<script src="/desktop.js"></script>');
      }
    });
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在这个例子中，页面加载时会通过JavaScript检测设备类型，并根据设备类型加载不同的CSS和JavaScript文件。

1.3 使用响应式设计

响应式设计（Responsive Web Design, RWD）可以通过一个代码库来同时适配不同的设备。通过CSS中的media queries，我们可以针对不同屏幕尺寸调整页面布局，从而在PC和移动设备上提供适配的体验。

1.3.1 示例代码 (CSS)

/* 基础样式 */
body {
  font-family: Arial, sans-serif;
}

/* 桌面设备样式 */
@media (min-width: 768px) {
  body {
    background-color: lightblue;
    /* 更多桌面设备特有的样式 */
  }
}

/* 移动设备样式 */
@media (max-width: 767px) {
  body {
    background-color: lightgreen;
    /* 更多移动设备特有的样式 */
  }
}

在这个例子中，使用了媒体查询来分别为桌面设备和移动设备定义不同的样式。页面会根据屏幕尺寸自动调整布局。