如何通过JS Navigator对象判断设备类型？

可以通过Navigator API的相关属性实现初步的设备类型判断，但存在准确率不足的缺陷，不建议单独依赖该API做核心判断逻辑，最好结合其他设备特征交叉校验。

常用的判断相关Navigator属性 #

• navigator.userAgent：目前最常用的判断字段，移动端设备的UA通常会携带Mobile、iPhone、Android、iPod等关键字，平板设备的UA一般会包含iPad、Tablet等标识，基础判断示例如下：

// 基础设备判断示例
const ua = navigator.userAgent.toLowerCase();
const isMobile = /(android|iphone|ipod|webos|blackberry)/i.test(ua) && ua.includes('mobile');
const isTablet = /(ipad|tablet)/i.test(ua) || (/(android)/i.test(ua) && !ua.includes('mobile'));

注意：用户可手动修改浏览器UA，部分小众设备、新上市设备的UA标识可能不符合通用规则，单独靠该字段判断误差较高。

• navigator.platform：返回浏览器运行的操作系统平台，常见返回值包括iPhone、iPad、Android、Win32、MacIntel等，可作为辅助判断依据，但该属性已被官方标为废弃属性，新版浏览器未来可能逐步停止支持。
• navigator.maxTouchPoints：返回设备支持的最大同时触摸点数，移动端、平板设备的该值通常≥1，无触摸功能的桌面端设备该值一般为0，可作为辅助校验项。

使用建议 #

• 不要单独依赖Navigator API的单个属性做设备判断，建议结合屏幕尺寸、宽高比、触摸事件支持等其他特征共同校验，提升判断准确率。
• 如果判断设备类型是为了做页面布局适配，优先使用CSS媒体查询实现响应式适配，效果和兼容性都会优于JS端的设备类型判断。

内容的提问来源于stack exchange，提问作者unknown_boundaries