JS如何精准判断手机还是电脑设备？

通过 User Agent (最常用、最可靠)

这是最经典也是最可靠的方法。navigator.userAgent 是一个字符串，包含了浏览器、操作系统、设备等信息,我们可以通过检查这个字符串中是否包含移动设备的关键词来判断。

正则表达式法（推荐）

这是最简洁、最高效的方式,我们可以使用一个正则表达式来匹配常见的移动设备关键词。

function isMobile() {
  // 定义常见的移动设备和操作系统的关键词
  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  // 测试 userAgent 是否匹配移动设备关键词
  return mobileRegex.test(navigator.userAgent);
}
// 使用示例
if (isMobile()) {
  console.log("这是手机设备");
  // 在这里执行手机端逻辑
} else {
  console.log("这是电脑设备");
  // 在这里执行电脑端逻辑
}

代码解析：

• navigator.userAgent: 获取当前浏览器的用户代理字符串。
• /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i: 这是一个正则表达式。
  • 表示“或”的关系。
  • Android, iPhone, iPad 等都是移动设备或操作系统的典型标识。
  • /i: 是正则表达式的修饰符，表示不区分大小写，这样可以匹配 "iPhone" 和 "iphone"。
• .test(): 如果字符串中包含匹配项，则返回 true，否则返回 false。

优点：

• 兼容性好：几乎所有浏览器都支持 navigator.userAgent。
• 可靠性高：直接由操作系统或浏览器内核提供,信息准确。
• 性能好：正则表达式匹配非常快。

缺点：

• User Agent 可被伪造：一些高级用户或开发者可以通过浏览器插件或修改设置来改变 userAgent,可能导致判断错误。
• 需要维护：如果出现了新的、未被包含的移动设备或浏览器,可能需要更新正则表达式。

通过屏幕宽度 (响应式设计常用)

这种方法不关心设备本身，而是关心设备的视口宽度，如果视口宽度小于某个阈值（通常是 768px），就认为是移动设备,这是响应式网页设计中非常常见的做法。

function isMobileByScreen() {
  // 通常认为宽度小于 768px 的设备是移动设备
  // 你可以根据需要调整这个阈值
  return window.innerWidth <= 768;
}
// 使用示例
if (isMobileByScreen()) {
  console.log("视口宽度较小，可能是手机设备");
} else {
  console.log("视口宽度较大，可能是电脑设备");
}

优点：

• 逻辑直观：直接根据页面布局来判断,符合响应式设计的初衷。
• 无法伪造：用户无法轻易改变浏览器的视口宽度（除非缩放，但缩放是有限的）。

缺点：

• 不准确：一个用户可能在电脑上把浏览器窗口缩小到很小，这时会错误地判断为手机，反之，一个用户可能在平板上横屏，此时宽度可能超过 768px。
• 依赖 CSS：这个阈值（768px）通常和你的 CSS 媒体查询断点保持一致,需要额外维护。

通过触摸事件支持

移动设备通常支持触摸事件，而传统电脑（不带触摸屏）则不支持，我们可以通过检查 ontouchstart 事件是否存在来判断。

function isMobileByTouch() {
  // 'ontouchstart' in window 检查当前 window 对象是否支持 touchstart 事件
  // 注意：一些笔记本电脑也支持触摸屏，所以这并不绝对
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}
// 使用示例
if (isMobileByTouch()) {
  console.log("设备支持触摸事件，可能是手机或平板");
} else {
  console.log("设备不支持触摸事件，可能是电脑");
}

优点：

• 基于行为：判断的是设备的能力,而不是标识符。
• 无法伪造：无法通过 JavaScript 伪造触摸事件的支持情况。

缺点：

• 不绝对：越来越多的笔记本电脑和显示器也支持触摸屏，这会导致误判（将触摸屏笔记本判断为移动设备）。
• 无法区分：无法区分只支持触摸的移动设备和同时支持触摸和鼠标的设备。

综合推荐方案（最佳实践）

在实际项目中，最可靠的做法是结合多种方法，形成一个“或”逻辑，只要满足其中一个条件就认为是移动设备，这样可以取长补短,提高判断的准确性。

下面是一个健壮的综合判断函数：

/**
 * 判断当前设备是否为移动设备
 * @returns {boolean}
 */
function isMobileDevice() {
  // 条件1: 通过 User Agent 判断
  const isMobileByUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  // 条件2: 通过屏幕宽度判断 (响应式断点)
  const isMobileByScreen = window.innerWidth <= 768;
  // 条件3: 通过触摸事件支持判断
  const isMobileByTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  // 只要满足任意一个条件，就认为是移动设备
  return isMobileByUA || isMobileByScreen || isMobileByTouch;
}
// 使用示例
if (isMobileDevice()) {
  console.log("当前设备是移动设备");
  // 加载移动端专属的 JS/CSS
  document.body.classList.add('is-mobile');
} else {
  console.log("当前设备是电脑设备");
  // 加载桌面端专属的 JS/CSS
  document.body.classList.add('is-desktop');
}

为什么这个方案好？

1. 高可靠性：即使 userAgent 被伪造，但如果用户的窗口很小或者设备支持触摸,依然能正确判断。
2. 高准确性：只有当一个设备在“标识”、“屏幕尺寸”和“能力”三个方面都像电脑时，才会被归类为电脑,大大降低了误判率。

最终建议： 直接使用综合方案，它为你提供了一个健壮、可靠的判断逻辑,可以应对绝大多数复杂的场景。