JavaScript通过navigator.userAgent检测浏览器和设备类型仅适用于体验优化，不可用于安全判断；应结合关键词匹配、视口宽度、touch事件等多信号判断移动设备；推荐优先使用特性检测而非UA识别。
JavaScript 主要通过 navigator.userAgent 字符串来检测用户的浏览器和设备类型，但要注意：它只是“提示信息”，可被伪造或修改，不能作为安全判断依据，仅适用于体验优化（比如适配移动端样式、提示升级旧浏览器）。
识别常见浏览器（基于 userAgent）
userAgent 是一段包含浏览器名称、版本、操作系统等信息的字符串。虽然格式不统一，但可通过关键词匹配粗略判断：
-
Chrome：包含
"Chrome"且不包含"Edg"和"OPR"（避免误判 Edge 或 Opera） -
Safari：包含
"Safari"且不包含"Chrome"和"CriOS" -
Firefox：包含
"Firefox" -
Edge：包含
"Edg"（新版 Chromium Edge）或"Edge"（旧版 EdgeHTML） -
IE：包含
"MSIE"或"Trident"（已淘汰，但仍有少量场景需兼容）
区分移动设备与桌面设备
比单纯看 userAgent 更可靠的方式是结合多种信号：
- 检查
navigator.userAgent是否含"Mobile"、"Android"、"iPhone"、"iPad"等关键词 - 用
screen.width或window.innerWidth判断视口宽度（如常视为移动设备） - 检查
'ontouchstart' in window—— 移动端/触屏设备通常支持 touch 事件（注意：部分 Windows 笔记本也支持，需配合其他条件）
推荐组合判断，例如：isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile/.test(navigator.userAgent) || (window.innerWidth
立即学习“Java免费学习笔记（深入）”；
获取操作系统信息
从 userAgent 中提取 OS 类型较常见，但精度有限：
flavr―漂亮的jQuery扁平弹出对话框
下载
flavr是一个时尚的扁平弹出对话框为您的下一个网站。flavr是响应设计布局，能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画，最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
-
"Windows"→ Windows -
"Mac OS X"→ macOS（注意空格和版本号格式） -
"Linux"→ Linux（含 Chromebook、部分国产系统） -
"Android"→ Android -
"iPhone"或"iPad"→ iOS/iPadOS
注意：navigator.platform（如 "Win32"、"MacIntel"）可辅助参考，但它反映的是编译平台，不一定等于运行系统（尤其在模拟器或跨平台环境中）。
更现代、更可靠的替代思路
UA 检测正逐渐被更健壮的方案取代：
-
特性检测（Feature Detection）：用
'geolocation' in navigator、typeof fetch !== 'undefined'等判断功能是否存在，而不是猜浏览器 -
CSS @supports：在样式层做能力适配，如
@supports (display: grid) { ... } -
HTTP Client Hints（服务端配合）：如
Sec-CH-UA、Sec-CH-UA-Mobile，比 UA 更安全可控（需服务端支持）
前端 JS 中若必须识别，建议只用于非关键路径的 UI 微调，避免用它控制核心逻辑或权限。
基本上就这些。不复杂但容易忽略的是：别依赖单一字段，多加一层验证；别拿它做安全决策；优先考虑“这个功能有没有”，而不是“这是什么浏览器”。
