怎么判断ios设备、移动设备、浏览器

最新推荐文章于 2024-05-19 09:47:49 发布

guanguan0_0

最新推荐文章于 2024-05-19 09:47:49 发布

阅读量655

点赞数

分类专栏：前端开发文章标签： Navigator userAgent 判断设备类型判断是否是ios系统判断浏览器类型

本文链接：https://blog.youkuaiyun.com/guanguan0_0/article/details/120333492

版权

前端开发专栏收录该内容

26 篇文章

订阅专栏

Navigator

Navigator接口表示用户代理的状态和标识。允许脚本查询它和注册一些自己的服务

我们可以通过window.navigator来访问Navigator对象

常用属性

Navigator.appVersion：浏览器版本

Navigator.appName：浏览器官方名称

Navigator.connection：设备网络连接信息

Navigator.geolocation：可访问设备的地址位置信息

Navigator.language：浏览器用户界面的首选语言

Navigator.languages：浏览器用户已知语言的数组列表，并按优先顺序排列

Navigator.platform：浏览器平台名

Navigator.userAgent：当前浏览器的用户代理

Navigator.serviceWorker：提供对ServiceWorker的注册，删除，升级和通信的访问

Navigator.onLine：浏览器是否联网

Navigator.plugins：浏览器安装的插件数组列表

Navigator.product：在任意浏览器下都只返回'Gecko'，此属性只用于兼容的目的

Navigator.bettery：电池充电状态信息

常用函数


const ua = navigator.userAgen;

// 浏览器类型识别
const browserList = {
  wechat: !!ua.match(/MicroMessenger/i),
  weibo: !!ua.match(/Weibo/i),
  chrome: ua.indexOf('Chrome') > -1 || ua.indexOf('CriOS') > -1,
  opera: ua.indexOf('Opera') > -1 || ua.indexOf('OPR') > -1,
  ie: ua.indexOf('compatible') > -1 && ua.indexOf('MSIE') > -1,
  ie11: ua.indexOf('Trident') > -1 && ua.indexOf('rv:11.0') > -1,
  firefox: ua.indexOf('Firefox') > -1,
  safari: ua.indexOf('Safari') > -1 && ua.indexOf('Chrome') === -1,
  qqbrowser: ua.indexOf('MQQBrowser') > -1 && ua.indexOf(' QQ') === -1,
  qq: ua.indexOf('QQ') > -1,
  sogousearch: !!ua.match(/sogousearch/i),
  sougou: ua.indexOf('MetaSr') > -1 || ua.indexOf('Sogou') > -1,
  uc: !!ua.match(/UCBrowser/i) || ua.indexOf(' UBrowser') > -1,
  xiaomi: ua.indexOf('MiuiBrowser') > -1,
  baidu: ua.indexOf('Baidu') > -1 || ua.indexOf('BIDUBrowser') > -1,
  360: ua.indexOf('360EE') > -1 || ua.indexOf('360SE') > -1,
  2345: ua.indexOf('360EE') > -1 || ua.indexOf('360SE') > -1,
  edge: ua.indexOf('Edge') > -1,
}

// 操作系统类型列表
const osList = {
  windows: !!ua.match(/compatible/i) || ua.match(/Windows/i),
  macOS: !!ua.match(/Macintosh/i) || ua.match(/MacIntel/i),
  ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  andriod: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1
}

// 设备类型识别
const getEquip = ()=>{
  const isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian;

  if(isAndroid || isPhone) {
      alert("手机")
  } else if(isTablet) {
      alert("平板")
  } else if(isPc) {
      alert("电脑")
  }
}