JS如何通过UserAgent判断设备类型？

一分耕耘，一分收获！既然打开了这篇文章《JS如何通过userAgent检测设备类型？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

检测设备类型的核心方法是使用JavaScript的navigator.userAgent结合正则表达式进行判断，具体步骤如下：1. 获取User Agent并转为小写；2. 使用正则表达式判断是否包含iphone、ipad、ipod或android来识别移动设备；3. 如需更精确判断，可进一步区分Android手机与平板，通过检测是否包含mobile关键字排除平板；4. 推荐使用ua-parser-js库解析User Agent，以提高准确性和简化开发；5. 除User Agent外，也可结合CSS Media Queries和屏幕尺寸辅助判断设备类型，但因屏幕尺寸可变，仍建议综合多种方式共同判断。

检测设备类型，说白了，就是用JavaScript来判断用户是用手机、平板还是电脑访问你的网站。核心在于navigator.userAgent这个东西，它包含了用户浏览器发送给服务器的关于自己身份的信息。

解决方案

navigator.userAgent 就像一个浏览器的“身份证”，里面藏着设备类型的信息。但直接用它很麻烦，因为不同浏览器、不同设备，这个字符串的格式都不一样。我们需要用正则表达式来提取关键信息。

1. 获取 User Agent：

   

   const userAgent = navigator.userAgent.toLowerCase();

   先把它转成小写，方便后面匹配。

2. 判断是否是移动设备：

   const isMobile = /iphone|ipad|ipod|android/.test(userAgent);
   
   if (isMobile) {
     console.log("这是一个移动设备");
   } else {
     console.log("这是一个桌面设备");
   }

   这里用了一个简单的正则表达式，如果userAgent里包含iphone、ipad、ipod或者android，就认为是移动设备。

3. 更精确的判断（可选）：

   如果需要更精确的判断，比如区分Android手机和平板，可以这样：

   const isAndroid = /android/.test(userAgent);
   const isTablet = /ipad|android/.test(userAgent) && !/mobile/.test(userAgent);
   
   if (isAndroid && !isTablet) {
     console.log("这是一个Android手机");
   } else if (isTablet) {
     console.log("这是一个平板");
   }

   这里先判断是否是Android，然后判断是否是平板。平板的判断稍微复杂一点，要同时包含ipad或者android，并且不包含mobile。

4. 注意事项：

   • User Agent是可以被修改的，所以这种方法不是100%可靠。
   • 不同的浏览器和设备，User Agent的格式可能不一样，需要不断更新正则表达式。
   • 尽量不要依赖User Agent来做关键的业务逻辑，比如支付，可以用服务器端来判断。

为什么不直接用navigator.platform？

navigator.platform 理论上应该返回操作系统的信息，但实际上，它在不同浏览器上的表现并不一致，很多时候都返回Win32或者MacIntel，参考价值不大。而且，即使能正确返回操作系统信息，也无法区分手机和平板。所以，navigator.userAgent才是更可靠的选择。

如何处理User Agent的兼容性问题？

User Agent的格式千奇百怪，要做到完全兼容是不可能的。一个比较好的做法是，收集常见的User Agent，然后根据实际情况不断更新正则表达式。也可以使用一些开源的User Agent解析库，比如ua-parser-js，它可以帮你解析User Agent，并返回设备类型、操作系统、浏览器等信息。

// 引入 ua-parser-js
const UAParser = require('ua-parser-js');

// 获取 User Agent
const userAgent = navigator.userAgent;

// 解析 User Agent
const parser = new UAParser();
const result = parser.setUA(userAgent).getResult();

// 输出设备类型
console.log(result.device.type); // "mobile", "tablet", "desktop", "wearable", "tv"

// 输出操作系统
console.log(result.os.name); // "Android", "iOS", "Windows", "macOS"

// 输出浏览器
console.log(result.browser.name); // "Chrome", "Safari", "Firefox"

使用ua-parser-js可以大大简化User Agent的解析工作，并且可以获得更准确的结果。

除了User Agent，还有其他方法检测设备类型吗？

除了User Agent，还可以使用CSS Media Queries来判断设备类型。Media Queries可以根据屏幕尺寸、分辨率等条件来应用不同的CSS样式。

/* 屏幕宽度小于768px时，应用以下样式 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 屏幕宽度大于768px时，应用以下样式 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

Media Queries主要用于响应式布局，但也可以用来判断设备类型。比如，如果屏幕宽度小于768px，就认为是移动设备。

另外，还可以使用JavaScript来获取屏幕尺寸，然后根据屏幕尺寸来判断设备类型。

const screenWidth = window.screen.width;

if (screenWidth < 768) {
  console.log("这是一个移动设备");
} else {
  console.log("这是一个桌面设备");
}

但是，这种方法也有局限性，因为屏幕尺寸是可以被修改的，而且有些桌面设备的屏幕也很小。

总的来说，检测设备类型最好的方法是结合User Agent、CSS Media Queries和屏幕尺寸等多种信息，综合判断。

理论要掌握，实操不能落！以上关于《JS如何通过UserAgent判断设备类型？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！