【2025年前端高频场景题系列】使用同一个链接，如何实现PC打开是web应用、手机打是-个H5 应用？

面试情境与问题引入

在前端开发面试中，面试官经常会抛出一些看似简单却能考察多方面能力的问题。"如何实现同一个链接在PC端和移动端展示不同应用？"就是这样一个典型问题。为什么面试官喜欢问这个问题？因为它能同时考察候选人的设备适配知识、性能优化意识、用户体验理解以及技术选型能力。这个问题看似是在问技术实现，实则是在考察你作为前端工程师的全局思维和解决实际问题的能力。

当面试官抛出这个问题时，他们不仅期待听到一个技术方案，更希望了解你如何分析需求、权衡利弊并做出合理的技术决策。接下来，让我们深入探讨这个问题的解决方案，帮助你在面试中脱颖而出。

以下是正文：

在当今多设备访问的互联网环境中，用户可能通过不同的设备访问同一个链接。为了提供最佳的用户体验，我们通常需要根据用户的设备类型提供不同的界面和功能。例如，电商平台希望PC用户看到功能完整的网页版，而移动端用户则看到适合触控操作的H5版本。本文将从前端开发的角度，探讨如何实现同一链接在不同设备上呈现不同应用的技术方案。

技术原理与实现方法

1. 用户代理(User-Agent)检测

用户代理检测是最基础的设备识别方法。每个HTTP请求都会携带User-Agent头信息，其中包含了客户端的设备和浏览器信息。

function isMobile() {return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}if (isMobile()) {// 移动端逻辑
} else {// PC端逻辑
}

这种方法实现简单，但存在一定的局限性，因为User-Agent可以被伪造，且随着新设备的出现需要不断更新检测规则。

2. 服务器端重定向

服务器端重定向是一种可靠的方案，通过在服务器端检测User-Agent，将用户重定向到对应的应用版本。

// Node.js Express示例
app.use((req, res, next) => {const userAgent = req.headers['user-agent'];const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i