如何使用 JavaScript 来判断用户设备类型？

目录

简介

实践

[第一种 使用 navigator.userAgent](#第一种 使用 navigator.userAgent)

实现

[第二种 使用 navigator.platform](#第二种 使用 navigator.platform)

实现

[第三种 使用 window.innerWidth 和 window.innerHeight](#第三种 使用 window.innerWidth 和 window.innerHeight)

实现

总结

---

简介

在日常项目中会遇到判断当前是什么设备是PC端还是移动端，这里我给大家介绍一些JavaScript 的简单判断方式。

实践

有几种方法可以使用 JavaScript 来判断用户设备类型：

第一种 使用 navigator.userAgent

使用 navigator.userAgent 属性：navigator.userAgent 属性返回用户代理字符串，它包含了关于用户浏览器和操作系统的信息。你可以通过检查该字符串的内容来判断用户设备类型。

实现

if (/Android/i.test(navigator.userAgent)) {
    // 执行 Android 相关的逻辑
} else if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    // 执行 iOS 相关的逻辑
} else if (/Windows/i.test(navigator.userAgent)) {
    // 执行 Windows 相关的逻辑
} else if (/Mac/i.test(navigator.userAgent)) {
    // 执行 Mac 相关的逻辑
} else {
    // 执行其他设备相关的逻辑
}

这个方法基于用户代理字符串进行匹配，但需要注意的是，用户代理字符串是可以被修改的，所以不能完全依赖它来判断设备类型。

第二种 使用 navigator.platform

使用 navigator.platform 属性：navigator.platform 属性返回用户操作系统的平台信息。通常情况下，可以通过检查该属性的值来判断用户的操作系统类型。

实现

if (/Win/i.test(navigator.platform)) {
    // 执行 Windows 相关的逻辑
} else if (/Mac/i.test(navigator.platform)) {
    // 执行 Mac 相关的逻辑
} else if (/Linux/i.test(navigator.platform)) {
    // 执行 Linux 相关的逻辑
} else {
    // 执行其他操作系统相关的逻辑
}

这个方法只能判断操作系统类型，无法获得更具体的设备信息。

第三种 使用 window.innerWidth 和 window.innerHeight

使用 window.innerWidth 和 window.innerHeight 属性：window.innerWidth 和 window.innerHeight 属性可以获取浏览器窗口的宽度和高度。通过比较这两个值的大小，可以判断用户设备是移动设备还是桌面设备。

实现

if (window.innerWidth <= 768 && window.innerHeight <= 1024) {
    // 执行移动设备相关的逻辑
} else {
    // 执行桌面设备相关的逻辑
}

这种方法比较简单，但是只能判断设备的屏幕大小，而无法获取更详细的设备信息。

总结

以上是几种常见的方法来判断用户设备类型各有利弊，大家可根据具体的需求选择适合的方法即可。