使用 JavaScript 获取设备类型

在 Web 开发中，经常会遇到需要根据用户的设备类型或特征来进行一些特定的操作或逻辑。JavaScript 提供了几种方法来获取用户的设备类型。本文将介绍一些常用的方法以及相关的 JavaScript 代码示例。

1. 使用 navigator.userAgent 属性

navigator.userAgent 是一个只读的属性，它返回当前浏览器的用户代理字符串。用户代理字符串包含了浏览器的名称、版本、操作系统以及设备类型等信息。我们可以通过匹配特定的关键词来判断设备类型。

const userAgent = navigator.userAgent.toLowerCase();

if (userAgent.match(/android/i)) {
  console.log("当前设备为 Android");
} else if (userAgent.match(/iphone|ipad|ipod/i)) {
  console.log("当前设备为 iOS");
} else if (userAgent.match(/macintosh/i)) {
  console.log("当前设备为 Mac");
} else if (userAgent.match(/windows/i)) {
  console.log("当前设备为 Windows");
} else {
  console.log("当前设备为其他类型");
}

上述代码通过匹配关键词 android、iphone|ipad|ipod、macintosh 和 windows 来判断设备类型，并将结果输出到控制台。

2. 使用 navigator.platform 属性

另一个有用的属性是 navigator.platform，它返回浏览器运行的操作系统平台。

const platform = navigator.platform.toLowerCase();

if (platform.match(/win/i)) {
  console.log("当前设备为 Windows");
} else if (platform.match(/mac/i)) {
  console.log("当前设备为 Mac");
} else if (platform.match(/linux/i)) {
  console.log("当前设备为 Linux");
} else if (platform.match(/iphone|ipad|ipod/i)) {
  console.log("当前设备为 iOS");
} else if (platform.match(/android/i)) {
  console.log("当前设备为 Android");
} else {
  console.log("当前设备为其他类型");
}

上述代码通过匹配关键词 win、mac、linux、iphone|ipad|ipod 和 android 来判断设备类型，并将结果输出到控制台。

3. 使用媒体查询

除了使用 JavaScript 判断设备类型，我们还可以利用 CSS 媒体查询来实现相同的功能。通过判断视口的宽度或分辨率，可以对不同的设备类型应用不同的样式或布局。

/* 在 CSS 中使用媒体查询判断设备类型 */
@media screen and (max-width: 600px) {
  /* 当视口宽度小于等于 600px 时，应用样式 */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* 当视口宽度在 601px 到 1024px 之间时，应用样式 */
}

@media screen and (min-width: 1025px) {
  /* 当视口宽度大于等于 1025px 时，应用样式 */
}

在上述代码片段中，我们通过不同的视口宽度范围来判断设备类型，并应用相应的样式。

以上就是一些常用的方法来使用 JavaScript 获取设备类型的示例代码，你可以根据实际情况选择其中的一种或多种方法来判断设备类型并进行相应的操作。请根据实际需求选择适合的方法进行使用。