上海南桥网站建设办公室装修设计图片

在网页中我们经常会针对不同操作系统做不同处理，我们通过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有疑问的欢迎留言哦！