{T}

User Agent 设备判断与移动端适配

概述

移动端适配的第一步是准确判断设备类型。本文讲解 User Agent 解析方法、VueUse 的 useUserAgent 组合式函数，以及基于设备判断的路由分发策略。

学习目标

  • 理解 User Agent 字符串的结构与解析方式
  • 掌握 VueUse useDevice / useUserAgent 的使用
  • 学会基于设备类型的响应式路由分发

一、User Agent 基础

1.1 UA 字符串结构

code
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 特征
iOSiPhone / iPad / iPod
AndroidAndroid
WindowsWindows NT
macOSMacintosh / Mac OS X

1.2 判断方式

typescript
// 简单判断
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 设备检测

2.1 useUserAgent

typescript
import { useUserAgent } from '@vueuse/core'

const userAgent = useUserAgent()
const isMobile = computed(() =>
  /Android|iPhone|iPad|iPod/i.test(userAgent.value)
)

2.2 useMediaQuery

typescript
const isSmallScreen = useMediaQuery('(max-width: 768px)')
const isDark = useMediaQuery('(prefers-color-scheme: dark)')

三、路由分发策略

3.1 入口判断跳转

typescript
// 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', '') || '/'
  }
})

3.2 独立移动端应用

大型项目建议 PC 和移动端独立部署：

方案适用场景
同项目路由分发小型项目、共享逻辑多
独立项目独立部署大型项目、差异大
响应式一套代码内容展示型网站

常见问题

Q: UA 判断可靠吗？

UA 可以被伪造，不适合用于安全判断。但对于 UI 适配场景足够可靠。更精确的方式是结合 navigator.maxTouchPoints 和媒体查询。

Q: iPad 的 UA 为什么显示为 Mac？

iPadOS 13+ 默认请求桌面版网站，UA 中显示 Macintosh。需通过 navigator.maxTouchPoints > 1 辅助判断。

延伸阅读