如何用JavaScript判断手机操作系统(ios、安卓、华为)
作者:Jenna的海糖
这篇文章主要介绍了如何用JavaScript判断手机操作系统(ios、安卓、华为)的相关资料,在JS中判断手机的操作系统可以通过User-Agent字符串、特定的浏览器API以及特定的特性检测来实现,需要的朋友可以参考下
前言
在网页中我们经常会针对不同操作系统做不同处理,我们通过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{ }
上面就是区分不同手机的精准判断方法了!
附:js 如何识别纯血鸿蒙系统
纯血鸿蒙系统
纯血鸿蒙系统,也称为鸿蒙HarmonyOS NEXT,是华为公司开发的一款全场景分布式操作系统。
纯血鸿蒙系统 UA
1、手机系统浏览器
Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile HuaweiBrowser/5.0.3.351
2、UC 浏览器
Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile UCBrowser/17.1.8.1349
3、App 内嵌 webview
Mozilla/5.0 (Phone; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile PPDWebUI/10.5.0 PPDLoanApp/10.5.0.24101701 (AppID/1000006053; huawei_hm) (HUAWEI;BRA-AL00;BF914FD6A4EABBB0BD31B630094364F6;Harmony/5.0.1.71)
识别方法
通过对上述 UA 的分析,我们可以发现纯血鸿蒙系统的 UA 中都带有 OpenHarmony 5.0 标识。所以要检测纯血鸿蒙系统可以按照如下方式进行:
const USER_AGENT = window.navigator.userAgent || ''; const IS_HARMONY = /OpenHarmony/i.test(USER_AGENT);
总结
到此这篇关于如何用JavaScript判断手机操作系统(ios、安卓、华为)的文章就介绍到这了,更多相关js判断手机操作系统内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!