要实现使用同一个链接，PC 打开是 Web 应用、手机打开是 H5 应用，可以通过以下几种常见的方法：
方法一：基于客户端检测的服务端渲染
在服务端根据请求设备的信息来判断是 PC 还是手机，然后返回不同的页面内容。
实现步骤
- 检测客户端类型：在服务端代码中，通过解析请求头中的
User-Agent字段来判断客户端是 PC 还是手机。 - 返回不同页面：根据检测结果，返回对应的 Web 应用页面或 H5 应用页面。
示例代码（使用 Node.js 和 Express 框架）
const express = require('express');
const app = express();
app.get('/', (req, res) => {
const userAgent = req.headers['user-agent'];
const isMobile = /Mobile|Android|iPhone|iPad|iPod/i.test(userAgent);
if (isMobile) {
// 返回 H5 应用页面
res.sendFile(__dirname + '/h5.html');
} else {
// 返回 Web 应用页面
res.sendFile(__dirname + '/web.html');
}
});
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
方法二：基于客户端检测的前端渲染
在前端代码中检测设备类型，然后根据检测结果加载不同的资源或切换页面布局。
实现步骤
- 检测客户端类型：在前端 JavaScript 代码中，通过
navigator.userAgent来判断客户端是 PC 还是手机。 - 加载不同资源：根据检测结果，加载对应的 Web 应用资源或 H5 应用资源。
示例代码
<!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>
</head>
<body>
<div id="app"></div>
<script>
const isMobile = /Mobile|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
if (isMobile) {
// 加载 H5 应用脚本
const h5Script = document.createElement('script');
h5Script.src = 'h5-app.js';
document.body.appendChild(h5Script);
} else {
// 加载 Web 应用脚本
const webScript = document.createElement('script');
webScript.src = 'web-app.js';
document.body.appendChild(webScript);
}
</script>
</body>
</html>
方法三：使用响应式设计和媒体查询
如果 Web 应用和 H5 应用的差异不是特别大，可以使用响应式设计和媒体查询来实现同一页面在不同设备上的不同布局。
实现步骤
- 编写响应式 CSS：使用媒体查询来根据设备的屏幕宽度应用不同的样式。
- 设计自适应布局：确保页面元素能够根据设备屏幕大小自动调整布局。
示例代码
<!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>
<style>
/* 默认样式，适用于 PC */
body {
font-size: 16px;
}
/* 媒体查询，适用于手机 */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>Responsive App</h1>
<p>This is a responsive application.</p>
</body>
</html>
以上三种方法各有优缺点，你可以根据具体需求选择合适的方法。如果 Web 应用和 H5 应用的差异较大，建议使用服务端渲染或前端渲染的方法；如果差异较小，可以使用响应式设计和媒体查询的方法。
