如何判断用户设备【热度: 551】

关键词：判断设备

在 Web 前端开发中，判断用户设备类型（如手机、平板、桌面电脑）主要依赖于用户代理字符串（User-Agent）和/或视口（Viewport）的尺寸。以下是一些常用方法：

使用用户代理字符串（User-Agent）

用户代理字符串包含了浏览器类型、版本、操作系统等信息，可以通过分析这些信息来大致判断用户的设备类型。navigator.userAgent 属性用于获取用户代理字符串。

function detectDevice() {
  const userAgent = navigator.userAgent;

  if (/mobile/i.test(userAgent)) {
    return "Mobile";
  }
  if (/tablet/i.test(userAgent)) {
    return "Tablet";
  }
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return "iOS Device";
  }
  // Android, Windows Phone, BlackBerry 识别可以类似添加

  return "Desktop";
}

console.log(detectDevice());

使用视口尺寸

有时候用户代理字符串可能不够准确或被修改，此时可以根据视口尺寸作为补充手段。通过检测屏幕的宽度，你可以推断出设备的大致类别。

function detectDeviceByViewport() {
  const width = window.innerWidth;

  if (width < 768) {
    return "Mobile";
  }
  if (width >= 768 && width < 992) {
    return "Tablet";
  }
  return "Desktop";
}

console.log(detectDeviceByViewport());

使用 CSS 媒体查询

虽然 CSS 媒体查询主要用于响应式设计，但你也可以在 JavaScript 中使用 window.matchMedia() 方法来判断设备类型。这提供了一种基于 CSS 媒体查询语法来检测设备/视口特性的方式。

function detectDeviceByMediaQuery() {
  if (window.matchMedia("(max-width: 767px)").matches) {
    return "Mobile";
  } else if (window.matchMedia("(min-width: 768px) and (max-width: 991px)").matches) {
    return "Tablet";
  } else {
    return "Desktop";
  }
}

console.log(detectDeviceByMediaQuery());

注意

用户代理字符串被视为不可靠：由于用户代理字符串可以被修改，某些情况下可能不能准确反映用户的设备信息。
响应式设计原则：在进行设备检测时，最佳实践是根据内容和功能的需要来适应不同设备，而不是针对特定设备进行优化或限制。

综上，设备检测方法多种多样，选择合适的方法取决于你的具体需求和场景。在可能的情况下，优先考虑使用响应式设计原则，来创建能够在不同设备上良好工作的网页。