掌握JS获取设备类型的关键技巧，轻松分辨手机、平板还是电脑

在开发Web应用时，了解用户所使用的设备类型对于优化用户体验至关重要。JavaScript为我们提供了多种方法来获取设备的类型，如手机、平板或电脑。以下是一些关键技巧，帮助你轻松分辨不同设备。

1. 使用`navigator`对象

navigator对象是浏览器提供的API，包含有关浏览器的信息。以下是一些常用的属性：

1.1 `navigator.userAgent`

userAgent字符串包含了用户代理信息，它是一个描述浏览器和操作系统的字符串。通过分析这个字符串，我们可以判断设备类型。

function getDeviceType() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if (/android/i.test(userAgent)) {
    return '手机';
  } else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return '平板';
  } else if (/Windows NT/.test(userAgent)) {
    return '电脑';
  } else {
    return '未知设备';
  }
}

console.log(getDeviceType());

1.2 `navigator.platform`

platform属性包含了操作系统的信息，如Windows、MacIntel等。

function getDeviceType() {
  var platform = navigator.platform;

  if (/android/i.test(platform)) {
    return '手机';
  } else if (/iPad|iPhone|iPod/.test(platform) && !window.MSStream) {
    return '平板';
  } else if (/Win/i.test(platform)) {
    return '电脑';
  } else {
    return '未知设备';
  }
}

console.log(getDeviceType());

2. 使用CSS媒体查询

CSS媒体查询可以用来根据设备的屏幕尺寸判断设备类型。以下是一些常用的媒体查询：

@media only screen and (max-width: 600px) {
  /* 手机 */
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* 平板 */
}

@media only screen and (min-width: 1025px) {
  /* 电脑 */
}

3. 使用第三方库

如果你需要更复杂的设备检测功能，可以使用第三方库，如Modernizr、Device.js等。这些库提供了丰富的API，可以帮助你快速判断设备类型。

4. 注意事项

用户代理信息可能被篡改，因此不要完全依赖userAgent来判断设备类型。
设备类型可能随着时间和操作系统更新而发生变化，请定期检查和更新你的代码。
在实际开发中，可能需要结合多种方法来判断设备类型，以确保最佳的用户体验。