【JavaScript】判断用户设备类型

用户代理信息

正则表达式匹配了⼀些移动设备的关键词，如果⽤户代理信息中包含这些关键词，则可=以认为是移动设备。

function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// 使⽤示例
if (isMobile()) {
  console.log("This is a mobile device.");
} else {
  console.log("This is a desktop device.");
}
console.log("This is a mobile device.");
console.log("This is a desktop device.");

window.matchMedia

利⽤ window.matchMedia ⽅法来根据屏幕宽度判断是否为移动设备。

这⾥的参数 (max-width: 768px) 表示屏幕宽度最⼤为 768 像素，如果当前屏幕宽度⼩于等于 768 像素，则可以认为是移动设备。

function isMobile() {
  return window.matchMedia("(max-width: 768px)").matches;
}
// 使⽤示例
if (isMobile()) {
  console.log("This is a mobile device.");
} else {
  console.log("This is a desktop device.");
}

window.innerWidth 和 window.innerHeight 也是同理。

第三方库

使用一些第三方库，如 Device.js，Detect.js 等。

使用 UA 字符串

每个浏览器都有⼀个 User-Agent (UA) 字符串，其中包含了浏览器和设备的相关信息。通过解析 UA 字符串，可以判断⽤户设备类型。但需要注意的是，UA 字符串可以被篡改，因此这种⽅法并不可靠。