最可靠方式是用 window.matchMedia("(max-width: 768px)").matches 判断移动设备，辅以 "(hover: none) and (pointer: coarse)" 校验交互能力；navigator.userAgent 易伪造且有陷阱，仅作辅助；screen.width 受缩放和方向影响大，不可直接用于设备判断。
用 navigator.userAgent 判断设备类型最直接但有陷阱
浏览器的 navigator.userAgent 字符串里通常包含 Mobile、iPad、iPhone、Android 等关键词，PC 则常含 Windows、Macintosh、Linux。但不能只靠“有没有 Mobile”来区分——iPad 的 UA 里有 Mobile 却不是手机；Chrome 桌面版在开发者工具里模拟 iPhone 时 UA 完全一样。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先检查
/(iPad|iPhone|iPod|Android)/i.test(navigator.userAgent)，把 iPad/iPhone/iPod/Android 明确列为移动设备 - 再排除桌面常见标识：
!/(Win|Mac|X11|Linux)/i.test(navigator.userAgent)不能单独用，因为某些安卓平板 UA 也可能含Linux - 更稳妥的做法是「白名单+排除」：先匹配已知移动设备 UA 特征，再排除明确是桌面的（如
Windows NT 10.0+ 无Mobile）
用 window.matchMedia 检测响应式断点更可靠
UA 可被伪造、不可靠，而屏幕尺寸和媒体查询是运行时真实状态。window.matchMedia("(max-width: 768px)") 或 "(hover: none) and (pointer: coarse)" 能反映实际交互能力。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
window.matchMedia("(max-width: 768px)").matches是最常用判断依据，覆盖多数手机竖屏场景 - 组合判断更准：
window.matchMedia("(hover: none) and (pointer: coarse)").matches表示无悬停能力且触控精度低，基本可认定为手机或低端平板 - 注意：不要只依赖单个媒体查询，比如
max-width: 1024px会把小屏笔记本也判为手机
服务端 UA 解析比前端更稳定，但需配合客户端降级
Node.js 或 Nginx 层用 useragent（npm 包）或 express-useragent 解析 UA，比前端 JS 更规范——它们内置了设备数据库，能识别 Chrome/120.0.0.0 Mobile 和 Chrome/120.0.0.0 的差异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 服务端识别后，通过 HTTP 响应头（如
X-Device-Type: mobile）或内联脚本注入全局变量window.__DEVICE_TYPE__ = "mobile" - 前端必须保留 fallback：服务端可能出错或 CDN 缓存导致 UA 失真，仍要用
matchMedia再校验一次 - 避免在 SSR 中完全依赖 UA 做关键渲染逻辑，比如把手机用户重定向到 m.site —— 这类操作必须由客户端最终确认
screen.width 和 screen.height 不适合直接判断设备类型
screen.width 返回的是物理屏幕宽度（单位：像素），不是 CSS 像素，且受缩放、横竖屏、系统 DPI 影响极大。iPhone 14 Pro Max 横屏时 screen.width 是 1290，竖屏是 2556，同一设备两次结果翻倍。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远不要用
screen.width 当作手机判定条件 - 如果非要参考尺寸，用
window.innerWidth（当前视口宽度）+window.devicePixelRatio估算设备像素比，再结合matchMedia - 记住：设备类型 ≠ 屏幕大小。折叠屏手机展开后
window.innerWidth可达 1400px，但它仍是手机
