靠谱但仅适用于简单场景，因 userAgent 可伪造且非 100% 可靠；推荐用正则 /mobile|android|ipad|ios/i.test(navigator.userAgent) 判断，兼顾大小写与 iPad 兜底。
直接用 navigator.userAgent 判断移动端靠谱吗？
靠谱，但只适合简单场景。它不是 100% 可靠（用户可伪造、部分浏览器禁用），但对「快速区分 PC 和手机端基础交互」足够用——比如隐藏 hover 菜单、启用 touchstart 替代 click、调整滚动行为。别拿它做安全判断或精确设备型号识别。
userAgent 里哪些字符串能稳定标识移动端？
重点看三个关键词，它们在主流移动浏览器中几乎必现：
-
Mobile：iOS Safari、Android Chrome、微信内置浏览器都带这个 -
iOS或iPad：注意 iPad 默认 UA 里可能不含Mobile，但含iPad或iOS -
Android：Android 浏览器和 WebView 的通用标识
所以最简健壮写法是：
const isMobile = /Mobile|Android|iPad|iOS/.test(navigator.userAgent);
不要只匹配 Mobile，否则漏掉 iPad 桌面模式或某些 Android 平板。
为什么不能只用 match() 或 includes()？
match() 返回数组或 null，容易误判；includes() 大小写敏感，而 UA 字符串大小写不统一（如某些国产浏览器返回小写 mobile）。正则加 test() 最省心：
// ✅ 推荐：忽略大小写，逻辑清晰
const isMobile = /mobile|android|ipad|ios/i.test(navigator.userAgent);
// ❌ 避免：includes("Mobile") 会漏掉 "mobile"、"ANDROID"
// ❌ 避免：match(/Mobile/) 可能返回 null，需额外判空
另外，别在服务端用这个——navigator 是浏览器 API，Node.js 里根本不存在。
识别后怎么切交互逻辑？举个真实例子
常见需求：PC 端用 click + hover，移动端改用 touchstart + 禁用 :hover 样式。别全局监听 touchstart，只在移动端绑定：
if (isMobile) {
element.addEventListener('touchstart', handleInteraction, { passive: true });
// 同时可加 class 让 CSS 生效，比如 .mobile-only { display: block; }
document.body.classList.add('mobile');
} else {
element.addEventListener('click', handleInteraction);
}
注意两个坑：touchstart 默认会触发 click（300ms 延迟残留），加 { passive: true } 提升滚动性能；document.body.classList.add('mobile') 比媒体查询更可控，尤其当页面需要响应式 JS 逻辑而非仅样式时。
UA 判断是一次性动作，别在滚动或 resize 里反复调用——它不会变。真正容易被忽略的是 iPad：它既可能进 Mobile 分支（Safari 移动版），也可能进桌面分支（macOS Safari 模拟器或桌面模式），得靠 iPad 关键字兜底。
