摘要：提取 navigator.userAgent 字符串通过正则表达式匹配特征关键词function detectDevice { const userAgent = navigator.userAgent.toLowerCase; const device =
在前端开发中，判断用户设备类型是常见需求，可通过浏览器环境检测、设备能力特征分析等方式实现。以下是具体实现思路及代码示例：
原理 ：User-Agent 是浏览器发送给服务器的标识字符串，包含设备、系统、浏览器等信息。实现步骤 ：
提取 navigator.userAgent 字符串通过正则表达式匹配特征关键词function detectDevice { const userAgent = navigator.userAgent.toLowerCase; const device = {}; #技术分享 const isMobile = /android|webos|iphone|iPad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); device.isMobile = isMobile; if (/(iphone|ipad|ipod)/i.test(userAgent)) { device.type = 'ios'; device.model = /iphone/i.test(userAgent) ? 'iPhone' : 'iPad'; } else if (/android/i.test(userAgent)) { device.type = 'android'; const androidVersion = userAgent.match(/android (\d+\.\d+)/); device.version = androidVersion ? androidVersion[1] : '未知'; } else if (/windows phone/i.test(userAgent)) { device.type = 'windows phone'; } else if (/macintosh/i.test(userAgent)) { device.type = 'mac'; } else if (/windows/i.test(userAgent)) { device.type = 'windows'; } else { device.type = '其他'; } device.isTablet = (/(ipad|android tablet|windows phone 8.1|kindle|nexus 7)/i.test(userAgent)) && !device.isMobile; if (/chrome/i.test(userAgent)) { device.browser = 'Chrome'; } else if (/firefox/i.test(userAgent)) { device.browser = 'Firefox'; } else if (/safari/i.test(userAgent) && !/chrome/i.test(userAgent)) { device.browser = 'Safari'; } else if (/msie|trident/i.test(userAgent)) { device.browser = 'IE/Edge'; } else { device.browser = '未知'; } return device;}const deviceInfo = detectDevice; console.log('设备类型:', deviceInfo.type); console.log('是否为移动设备:', deviceInfo.isMobile); console.log('浏览器:', deviceInfo.browser);原理 ：移动设备通常屏幕较小，且支持触摸操作，而 PC 设备以鼠标操作为主。
function enhanceDeviceDetection { const device = detectDevice; if (window.innerWidth 0; if (navigator.maxTouchPoints === 0) { device.pointerType = 'mouse'; } else if (navigator.maxTouchPoints > 2) { device.pointerType = 'pen'; } else { device.pointerType = 'touch'; } return device;}原理 ：通过浏览器原生 API 获取设备硬件特性，避免 User-Agent 被伪造的问题。
async function detectDeviceByAPI { const device = {}; if (navigator.device) { try { const deviceInfo = await navigator.device.getCapabilities; device.brand = deviceInfo.brand; device.model = deviceInfo.model; device.vendor = deviceInfo.vendor; } catch (error) { console.log('NavigatorDevice API获取失败:', error); } } device.retina = window.devicePixelRatio >= 2; if (navigator.getbattery) { navigator.getBattery.then(battery => { device.batteryLevel = battery.level; device.batteryCharging = battery.charging; }); } return device;}通过以上方案，可全面检测用户设备类型、系统、浏览器及硬件特性，为前端适配提供依据。
来源：墨码行者
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
