如何使用 JavaScript 检测移动设备和操作系统

2025-06-04

如何使用 JavaScript 检测移动设备和操作系统

你好，开发者们，

在这篇博客中，我们将学习如何使用 JavaScript 检测移动设备、浏览器或操作系统，以及如何自动将用户重定向到移动应用程序或 Web 应用程序。

目录

  1. JavaScript 中的导航器对象
  2. 导航器对象的属性
  3. 如何检测移动设备、浏览器或操作系统
  4. 如何在生产中检测移动设备、浏览器或操作系统

因此，不要浪费时间，让我们开始教程。

navigator1.JavaScript中的对象是什么

为了获取浏览器详细信息或设备详细信息，JavaScript 将这些信息存储在对象navigator的属性中window。
navigator对象包含大量有关浏览器的信息，其中一些最常用/最重要的信息我们将在本教程的后面看到。

让我们首先看看什么navigator是对象。
如果你直接想看看如何获​​取检测移动和桌面，那么你可以跳过这部分，可以点击这里

navigator对象包含有关浏览器的信息。
（注意：并非所有主流浏览器都支持此对象）

2.一些最重要的属性是，

  1. Clipboard- 用于将某些内容复制到剪贴板并将其粘贴到任何地方（例如，单击复制）
  2. connection
  3. language- 显示浏览器的语言。
  4. geolocation- 返回可用于定位用户位置的 Geolocation 对象
  5. onLine- 检查浏览器是否在线
  6. platform- 安装浏览器的机器类型。
  7. cookieEnabled- 它返回一个布尔值，指示是否启用 cookie。
  8. serviceWorker- 主要用于检查浏览器是否支持服务工作者
  9. vibrate(time)- 如果设备支持，则使设备振动
  10. userAgent-将会在下面看到
  11. userAgentData-将会在下面看到

我认为关于导航器对象的这么多信息足以理解什么是navigator对象以及它包含哪些信息

现在让我们看看

3.如何检测移动设备或浏览器或操作系统。

userAgent为了获取这些信息，我们将使用userAgentData导航器对象的属性。

navigator.userAgent
userAgent它会返回很多信息，比如设备名称、浏览器名称、操作系统版本，但浏览器返回的信息不太容易理解。
因此，我们可以从黑客的角度来理解这些返回的信息。

要获取操作系统版本和名称，您可以按照以下方法操作，

if (window.navigator.userAgent.indexOf("Windows NT 10.0")!= -1) 
{console.log("OS is Windows 10");}

if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1) 
{console.log("OS is Windows 8.1");}

if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1) 
{console.log("OS is Windows 8");}

if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1) 
{console.log("OS is Windows 7");}

if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1) 
{console.log("OS is Windows Vista");}

if (window.navigator.userAgent.indexOf("Windows NT 5.1") != -1) 
{console.log("OS is Windows XP");}

if (window.navigator.userAgent.indexOf("Windows NT 5.0") != -1) 
{console.log("OS is Windows 2000");}

if (window.navigator.userAgent.indexOf("Mac") != -1) 
{console.log("OS is Mac/iOS");}

if (window.navigator.userAgent.indexOf("X11") != -1) 
{console.log("OS is UNIX");}

if (window.navigator.userAgent.indexOf("Linux")!= -1) 
{console.log("OS is Linux");}
Enter fullscreen mode Exit fullscreen mode

要检查移动设备信息，您可以按照以下方法操作，

 function detectMobile() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}
Enter fullscreen mode Exit fullscreen mode

userAgent获取这些详细信息要复杂得多。
因此，我们增加了一个属性，即 一行代码即可提供有关浏览器和移动设备检测的信息。
navigator.userAgentData 

navigator.userAgentData.mobile; //returns true or false, depending on the condition
Enter fullscreen mode Exit fullscreen mode

注意：不建议在生产中使用这两种方式。

现在让我们看看最好的方法，

4.更好的方法是，

使用 它可以让你更灵活地决定在什么屏幕尺寸下将其作为移动设备或桌面设备处理，以及许多其他信息， 请查看 MDN 的官方文档，MDN - Media Query MDN- Media Query Features About PointermatchMedia




function DetectDevice() {
    let isMobile = window.matchMedia || window.msMatchMedia;
    if(isMobile) {
        let match_mobile = isMobile("(pointer:coarse)");
        return match_mobile.matches;
    }
    return false;
}

DetectDevice() //return true if mobile, and return false if desktop
Enter fullscreen mode Exit fullscreen mode

matchMedia 还赋予您选择权，让您根据屏幕尺寸选择将设备视为移动设备（与 CSS Media Query 相同），并且它比navigator对象灵活得多。

if (window.matchMedia("only screen and (max-width: 760px)")) {  
  //do something you want to for the screen size less than 760
}
Enter fullscreen mode Exit fullscreen mode

我们也可以使用window对象screen来实现这一点，但这些是较旧的方法，并且在较大的应用程序中更加复杂。

if(window.innerWidth > 768){//do something}
if(screen.width > 768){//do something}
Enter fullscreen mode Exit fullscreen mode

感谢您阅读到这里。本文简要介绍了如何使用 JavaScript 检测手机屏幕和操作系统。
如果您觉得本文有用，请点赞并分享。相信其他人也会觉得它有用。

如果您发现任何技术上不准确的内容，请随时在下面发表评论。

希望这篇文章对您来说有趣且有益。
访问https://www.capscode.in/blog了解更多……
下篇博客文章再见，保重！！

谢谢
@capscode

文章来源：https://dev.to/capscode/how-to-detect-mobile-device-os-using-javascript-4l9j
Devto 翻译
PREV
JavaScript 令人惊叹的运算符 JavaScript 令人惊叹的运算符
NEXT
除非你是一名程序员...