最可靠方法是组合使用 navigator.useragent 与 matchmedia：优先用 useragent.includes('mobile') || /android|iphone/.test(useragent) 初筛，再以 matchmedia('(max-width: 768px)') 实时响应视口变化，避免单靠 ua 或平台字段误判。
用 navigator.userAgent 判断设备类型最直接
浏览器的 navigator.userAgent 是最常用、兼容性最好的起点。它返回一串标识当前浏览器和操作系统的字符串，虽然现代浏览器有意弱化细节（比如 Chrome on Android 默认不带 “Android” 字样），但对基础设备区分仍足够可靠。
常见误判点：仅靠是否含 Mobile 就断定是手机——iOS Safari 在 iPad 上（尤其新版）可能不带 Mobile，但确实是平板；而某些桌面版 QQ 浏览器又会伪造 Mobile。
实操建议：
- 优先组合判断：
userAgent.includes('Mobile') || userAgent.includes('Android') || userAgent.includes('iPhone') - 排除 iPad 误伤：
!userAgent.includes('iPad')需谨慎，更稳妥的是加&& !/iPad/.test(userAgent)（正则更准） - 不要依赖
userAgent.indexOf('Win') !== -1判 PC——Windows Phone 已淘汰，但旧 UA 字符串里仍有残留，且 Win11 on ARM 设备 UA 也可能含Win却是平板
matchMedia('(max-width: 768px)') 比 UA 更可信
响应式设计中，matchMedia 查询视口宽度比解析 UA 更贴近真实使用场景。用户缩放、横竖屏切换、折叠屏展开后，UA 不变，但 matchMedia 能实时响应。
典型错误：只在页面加载时判断一次设备类型，后续窗口缩放或旋转就失效。
实操建议：
- 用
matchMedia('(max-width: 768px)')作为“移动端体验”的代理条件（768px 是常见平板分界） - 监听变化：
const mql = matchMedia('(max-width: 768px)'); mql.addEventListener('change', handler) - 注意：桌面浏览器窗口拖小也会触发，所以业务逻辑里要区分“真移动设备”和“小窗桌面”，可结合 UA 做二次过滤（如
mql.matches && /Mobile|Android|iPhone/.test(navigator.userAgent)）
navigator.platform 和 navigator.vendor 作用有限
navigator.platform（如 "Win32"、"MacIntel"）在现代浏览器中已基本不可信：Chrome 和 Firefox 在 macOS 上统一返回 "MacIntel"，哪怕 M1/M2 芯片；Edge 在 Windows 上可能返回 "Win64"，但无法区分台式机与笔记本。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
navigator.vendor（如 "Google Inc."）只反映浏览器开发商，和设备无关，纯属干扰项。
实操建议：
- 完全忽略
navigator.platform做设备判断，它既不准确，也不稳定 - 不要试图用它区分 Windows 台式机 vs 笔记本——没有标准字段支持这种粒度
- 若需芯片架构信息（如识别 Apple Silicon），必须走
navigator.userAgentData?.architecture（需开启 Permissions Policy，且仅 Chromium 101+ 支持）
需要精确设备型号？别用前端，得后端配合
前端 JavaScript 几乎无法可靠获取设备型号（如 “iPhone 14 Pro”、“Samsung Galaxy S23”）。UA 字符串里偶有型号，但被大量浏览器屏蔽或简化（iOS 17+ 默认隐藏具体机型），且安卓厂商定制 UA 差异极大。
真正需要型号的场景（如适配某款手机的摄像头 bug），必须由后端解析原始 HTTP User-Agent 请求头，并结合设备数据库（如 WURFL、DeviceAtlas）做映射。
实操建议：
- 前端只做粗粒度分流（手机 / 平板 / 桌面），型号级识别交给服务端
- 如果必须前端尝试，可用
navigator.userAgentData?.mobile（布尔值，比 UA 字符串更规范），但需先调用navigator.permissions.query({ name: 'userAgent' })并获允许，兼容性差（Safari 完全不支持） - 警惕第三方 JS 库吹嘘“精准识别型号”——它们只是维护了一套 UA 关键词映射表，覆盖不全，且极易过期
设备检测从来不是非黑即白的问题。真实项目里，往往要混合 UA 特征、媒体查询、触摸事件支持（'ontouchstart' in window）、甚至屏幕像素密度（window.devicePixelRatio > 1.5）来交叉验证。最常被忽略的一点：用户可以随时修改 UA 或禁用 JS，任何前端检测都只是提示性策略，不能替代响应式布局和渐进增强设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
