如何判断是否移动端设备

tech

场景

前端需要区分移动端和桌面端，以适配触控交互、视口尺寸、性能策略。

方案

CSS Media Query —— 按悬停能力判断（主方案）

CSS Media Query Level 4 标准。触屏设备不支持悬停，自然命中。

/* 触屏设备（手机、平板） */
@media (hover: none) {
}

/* 支持悬停的设备（桌面、笔记本） */
@media (hover: hover) {
}

优点： 不受 viewport 宽度影响——桌面浏览器缩窄窗口不会误触发；iPad 插鼠标后 hover: hover 自动生效。 缺点： 只能判断"有无悬停能力"，不能区分"手机还是平板"。

Navigator.userAgent —— JS 字符串匹配（兜底）

const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

当 CSS Media Query 不足以覆盖需求时（如强制区分移动端做功能跳转），再用 UA 兜底。但注意：UA 可伪造，iPadOS 13+ 默认伪装桌面 UA。