如何在浏览器中检测用户设备为桌面端或移动端（非宽度判断）

如果不想通过窗口宽度判断，基于User-Agent字符串检测是目前最可靠的方案——它直接识别用户的设备类型，完全不受窗口缩放、调整大小的影响。以下是具体实现方式：

1. 前端JavaScript实现 #

通过navigator.userAgent获取用户代理字符串，用正则匹配常见的移动设备标识：

function isMobileDevice() {
  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return mobileRegex.test(navigator.userAgent);
}

// 使用示例
if (isMobileDevice()) {
  console.log('当前为移动端访问');
  // 执行移动端专属逻辑
} else {
  console.log('当前为桌面端访问');
  // 执行桌面端专属逻辑
}

这个正则覆盖了主流移动设备和移动浏览器，能满足绝大多数场景的需求。

2. 后端服务端检测（更高效） #

如果项目有后端服务，可以在请求阶段就解析User-Agent，提前返回适配的页面内容，避免前端额外判断：

Node.js示例（Express框架） #

app.get('/', (req, res) => {
  const userAgent = req.headers['user-agent'];
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
  
  if (isMobile) {
    res.render('mobile-page'); // 返回移动端页面
  } else {
    res.render('desktop-page'); // 返回桌面端页面
  }
});

3. 辅助判断：结合指针特性（可选） #

部分桌面设备支持触摸功能，若需要更精细的区分，可以结合媒体查询检测指针类型，但不能单独依赖这个方法，需配合User-Agent使用：

function hasTouchPointer() {
  return window.matchMedia('(pointer: coarse)').matches;
}

// 结合使用示例
if (isMobileDevice() || hasTouchPointer()) {
  // 偏向移动端的交互逻辑
}

(pointer: coarse)匹配触摸设备的粗指针，(pointer: fine)匹配鼠标等精细指针，但注意部分二合一设备会同时支持两种指针类型。

注意事项 #

• User-Agent存在被篡改的可能，但在普通业务场景下足够可靠；
• 定期更新正则表达式，覆盖新出现的移动设备标识；
• 单页应用只需在页面初始化时检测一次，无需监听窗口大小变化。

内容的提问来源于stack exchange，提问作者Alan Power