兼容性：如何判断用户设备？

提示：判断用户设备（如手机、平板、电脑、操作系统、浏览器等）可以通过多种技术手段实现，主要包括以下几种方法：

---

---

1. 使用 navigator.userAgent（用户代理字符串）

浏览器会在 HTTP 请求头中发送 User-Agent，JavaScript 可以通过 navigator.userAgent 获取该信息，并解析设备类型。

示例代码

const userAgent = navigator.userAgent.toLowerCase();

// 判断设备类型
const isMobile = /mobile|android|iphone|ipod|ipad|windows phone/i.test(userAgent);
const isTablet = /ipad|android|tablet|kindle|silk/i.test(userAgent);
const isDesktop = !isMobile && !isTablet;

// 判断操作系统
const isWindows = /windows|win32|win64/i.test(userAgent);
const isMac = /macintosh|mac os x/i.test(userAgent);
const isLinux = /linux/i.test(userAgent);
const isIOS = /iphone|ipad|ipod/i.test(userAgent);
const isAndroid = /android/i.test(userAgent);

// 判断浏览器
const isChrome = /chrome|crios/i.test(userAgent);
const isFirefox = /firefox|fxios/i.test(userAgent);
const isSafari = /safari/i.test(userAgent) && !isChrome;
const isEdge = /edg|edge/i.test(userAgent);
const isIE = /msie|trident/i.test(userAgent);

console.log({
  isMobile,
  isTablet,
  isDesktop,
  isWindows,
  isMac,
  isLinux,
  isIOS,
  isAndroid,
  isChrome,
  isFirefox,
  isSafari,
  isEdge,
  isIE,
});

• 优缺点

✅ 简单易用，适用于大多数场景。

❌ 可能被篡改（某些浏览器允许修改 User-Agent）。

❌ 未来可能失效（Chrome 计划逐步淘汰 User-Agent，改用 Client Hints）。

---

2. 使用 window.screen 检测屏幕尺寸

可以根据屏幕分辨率、像素密度等判断设备类型。

示例代码

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const pixelRatio = window.devicePixelRatio || 1;

// 常见设备分辨率参考
const isMobile = screenWidth < 768;
const isTablet = screenWidth >= 768 && screenWidth < 1024;
const isDesktop = screenWidth >= 1024;

console.log({
  screenWidth,
  screenHeight,
  pixelRatio,
  isMobile,
  isTablet,
  isDesktop,
});

• 优缺点

✅ 难以伪造（screen.width 比 User-Agent 更可靠）。

❌ 不能区分操作系统或浏览器。

❌ 某些设备（如折叠屏）可能影响判断。

---

3. 使用 navigator.platform 检测操作系统

返回用户的操作系统平台（如 Win32、MacIntel、Linux x86_64）。

示例代码

const platform = navigator.platform.toLowerCase();

const isWindows = platform.includes("win");
const isMac = platform.includes("mac");
const isLinux = platform.includes("linux");
const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);

console.log({
  platform,
  isWindows,
  isMac,
  isLinux,
  isIOS,
});

• 优缺点

✅ 比 User-Agent 更精准（仅返回操作系统）。

❌ 无法区分具体设备（如 iPad vs Mac）。

---

4. 使用媒体查询（CSS + JS）

可以通过 CSS @media 或 JS window.matchMedia() 判断设备类型。

示例代码

const isMobile = window.matchMedia("(max-width: 767px)").matches;
const isTablet = window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches;
const isDesktop = window.matchMedia("(min-width: 1024px)").matches;

console.log({
  isMobile,
  isTablet,
  isDesktop,
});

• 优缺点

✅ 响应式设计友好，适合自适应布局。

❌ 不能检测具体设备或浏览器。

---

5. 使用现代 API（如 navigator.userAgentData）

Chrome 等浏览器正在推广 User-Agent Client Hints，提供更结构化的设备信息。

示例代码

if (navigator.userAgentData) {
  const { mobile, platform, brands } = navigator.userAgentData;
  console.log({
    isMobile: mobile,
    platform, // "Windows", "macOS", "Android", etc.
    brands,  // 浏览器品牌（如 Chrome, Edge）
  });
} else {
  console.log("Client Hints not supported, fallback to User-Agent");
}

优缺点
✅ 更精准、结构化（取代 User-Agent）。

❌ 兼容性较差（仅 Chrome 89+ 支持）。

---

6. 使用第三方库（推荐）

如果不想手动解析，可以使用现成的库：

• UAParser.js（解析 User-Agent）

• react-device-detect（React 专用）

• platform.js（轻量级设备检测）

• 示例（UAParser.js）

import UAParser from "ua-parser-js";

const parser = new UAParser();
const result = parser.getResult();

console.log(result);
// 输出示例：
// {
//   browser: { name: "Chrome", version: "120.0.0.0" },
//   os: { name: "Windows", version: "10" },
//   device: { model: "iPhone", type: "mobile", vendor: "Apple" }
// }

总结

方法	适用场景	优点	缺点
navigator.userAgent	通用设备检测	简单、广泛支持	可能被篡改
window.screen	判断屏幕尺寸	难以伪造	不能区分 OS/浏览器
navigator.platform	检测操作系统	比 User-Agent 更精准	不能区分设备
CSS/JS 媒体查询	响应式布局	适合自适应设计	不能检测具体设备
navigator.userAgentData	现代浏览器	结构化数据	兼容性差
第三方库（如 UAParser.js）	生产环境推荐	精准、易用	需额外依赖

推荐方案

1. 简单检测 → navigator.userAgent + window.screen
2. 生产环境 → UAParser.js
3. 未来趋势 → User-Agent Client Hints（Chrome 推荐）

这样可以兼顾兼容性和准确性。