前端浏览器判断设备类型的方法

在前端开发中，判断设备类型（如手机、平板、桌面电脑）有多种方法，以下是常用的几种方式：

1. 使用 User Agent 检测

通过 navigator.userAgent 获取用户代理字符串进行判断：

function getDeviceType() {const ua = navigator.userAgent;if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {return "tablet";}if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {return "mobile";}return "desktop";
}

2. 使用屏幕尺寸检测（响应式设计常用）

function getDeviceType() {const width = window.innerWidth;if (width < 768) {return 'mobile';} else if (width >= 768 && width < 1024) {return 'tablet';} else {return 'desktop';}
}

3. 使用现代 API 检测

使用 `navigator.maxTouchPoints`

function isTouchDevice() {return (('ontouchstart' in window) ||(navigator.maxTouchPoints > 0) ||(navigator.msMaxTouchPoints > 0));
}

使用媒体查询 (Media Queries)

function checkDeviceType() {if (window.matchMedia("(max-width: 767px)").matches) {return 'mobile';} else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {return 'tablet';} else {return 'desktop';}
}

4. 使用 CSS 媒体查询结合 JavaScript

/* CSS */
@media (max-width: 767px) {body:after {content: 'mobile';display: none;}
}
@media (min-width: 768px) and (max-width: 1023px) {body:after {content: 'tablet';display: none;}
}
@media (min-width: 1024px) {body:after {content: 'desktop';display: none;}
}

// JavaScript
function getDeviceType() {return window.getComputedStyle(document.body, ':after').content.replace(/"/g, '');
}

5. 使用第三方库

Modernizr: 功能检测库
UAParser.js: 专业的 User Agent 解析库
react-device-detect: React 设备检测库

// 使用 UAParser.js 示例
const parser = new UAParser();
const result = parser.getResult();
console.log(result.device.type); // "mobile", "tablet", "console", "smarttv" 等