js判断手机操作系统（ios、安卓、华为)

在网页中我们经常会针对不同操作系统做不同处理，我们通过js该怎么写才能更精准的判断出不同手机系统呢？系统自带的navigator.userAgent方法是没法精准区分安卓和华为的，所以海糖的建议是直接下载ua-parser-js插件来判断，很简单，直接按照我的步骤操作就可以啦！

一、安装ua-parser-js插件

如果是npm安装：

复制代码

npm i ua-parser-js

如果是yarn安装:

复制代码

yarn add ua-parser-js

二、引入

这里我们要注意result.os.name 和 result.device.vendor 的区别，前者是判断操作系统，后者是判断手机品牌，如果我们只区分安卓和ios,只用result.os.name判断就可以了，如果我们想细分华为手机，我们还需要用到 result.device.vendor，具体两种情况代码写在下面了：

1.如果只区分ios和安卓：

复制代码

import { UAParser } from 'ua-parser-js'

const parser = new UAParser()
const result = parser.getResult()
if(result.os.name === 'iOS'){
    //为ios手机做操作
}else if(result.os.name === 'Android'){
    //为安卓手机做操作
}

2.如果需要细分ios、安卓、华为：

复制代码

import { UAParser } from 'ua-parser-js'

const parser = new UAParser()
const result = parser.getResult()
if(result.os.name === 'iOS'){
    //为ios手机做操作
}else if(result.os.name === 'Android'){
    if(result.device.vendor === "Huawei"){
    //为华为手机做操作
    }else{
    //为安卓手机做操作
    }
} else if(result.os.name === 'Huawei'){
    //为华为手机做操作
}else{
}

上面就是区分不同手机的精准判断方法了，关于ua-parser-js有疑问的欢迎留言哦！