移动端适配的第一步是准确判断设备类型。本文讲解 User Agent 解析方法、VueUse 的 useMediaQuery 等检测工具，以及基于设备判断的路由分发策略。
Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)
AppleWebKit/605.1.15 (KHTML, like Gecko)
Version/16.0 Mobile/15E148 Safari/604.1关键标识：
| 设备 | UA 特征 |
|---|---|
| iOS | iPhone / iPad / iPod |
| Android | Android |
| Windows | Windows NT |
| macOS | Macintosh / Mac OS X |
// 简单判断
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
// 更精确的判断
const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent)
const isAndroid = /Android/i.test(navigator.userAgent)
const isWeChat = /MicroMessenger/i.test(navigator.userAgent)注意：
@vueuse/core并没有内置useUserAgent这样的 UA 解析函数（官方曾明确拒绝该提议，推荐使用 bowser 或 ua-parser-js）。UA 解析可自行封装：
// composables/useDevice.ts
import { computed } from 'vue'
export const userAgent = navigator.userAgent
export const isMobile = computed(() =>
/Android|iPhone|iPad|iPod/i.test(userAgent)
)const isSmallScreen = useMediaQuery('(max-width: 768px)')
const isDark = useMediaQuery('(prefers-color-scheme: dark)')// router/index.ts
router.beforeEach((to) => {
const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
if (isMobile && !to.path.startsWith('/m')) {
return `/m${to.path}`
}
if (!isMobile && to.path.startsWith('/m')) {
return to.path.replace('/m', '') || '/'
}
})大型项目建议 PC 和移动端独立部署：
| 方案 | 适用场景 |
|---|---|
| 同项目路由分发 | 小型项目、共享逻辑多 |
| 独立项目独立部署 | 大型项目、差异大 |
| 响应式一套代码 | 内容展示型网站 |
Q: UA 判断可靠吗？
UA 可以被伪造，不适合用于安全判断。但对于 UI 适配场景足够可靠。更精确的方式是结合 navigator.maxTouchPoints 和媒体查询。
Q: iPad 的 UA 为什么显示为 Mac？
iPadOS 13+ 默认请求桌面版网站，UA 中显示 Macintosh。需通过 navigator.maxTouchPoints > 1 辅助判断。