获取设备相关信息(移动端兼容必备)

const { navigator, screen } = window
// 获取设备信息
const { userAgent } = navigator
let osType = 'unknow'
if (/Android/i.test(userAgent)) {
  osType = 'android'
}
if (/\(i[^;]+;( U;)? CPU.+Mac OS X/.test(userAgent)) {
  osType = 'ios'
}

// 是否是移动端
const isMobile = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|MQQBrowser)/i.test(
  userAgent
)
// 是否是iPhone X
const isIPhoneX =
  osType === 'ios' && screen.height >= 812 && screen.width >= 375
// 是否支持webp图片编码
const isWebpEnv =
  document
    .createElement('canvas')
    .toDataURL('image/webp')
    .indexOf('data:image/webp') === 0

// app信息
let appInfo = {
  // 是否是app
  isApp: false,
  // 是否是混合app
  isHybrid: false,
  // 是否是原生app
  isNative: false,
  // 是否是iOS
  isIos: false,
  // 是否是Android
  isAndroid: false,
  // 系统类型 (iOS, Android)
  osPlatform: '',
  // app版本
  version: '',
  // app User-Agent内容
  appua: ''
}

const appInfoUserAgent = userAgent.split(' AI/')
if (appInfoUserAgent.length > 1) {
  const [typePlat, version] = appInfoUserAgent[1].split('=')
  const [appType, osPlatform] = typePlat.split('-')

  appInfo = {
    isApp: true,
    isHybrid: appType === 'Hybrid',
    isNative: appType === 'Native',
    isIos: osPlatform === 'iOS',
    isAndroid: osPlatform === 'Android',
    osPlatform,
    version,
    appua: `AI/${appInfoUserAgent[1]}`
  }
}

// standalone 独立,单独的意思
// 苹果iOS系统,能让 web 页面展示成app的样子,看起来像原生,本地app一样
// 在独立运行模式下,Safari 能隐藏顶部的网址输入框,底部的工具栏,让web完全像app的样子
// 使用html meta能开启独立模式：
// <meta name="apple-mobile-web-app-capable" content="yes">
// 在JS中,可以用window.navigator.standalone检测现在是不是在独立模式下
// 它的返回值,是一个布尔值,只在iOS Safari存在
export default {
  userAgent,
  osType,
  isMobile,
  standalone: !!navigator.standalone,
  isIos: osType === 'ios',
  isAndroid: osType === 'android',
  isIPhoneX,
  isSafari: /Safari/i.test(userAgent),
  isWeixin: /MicroMessenger/i.test(userAgent),
  isQQ: /\sQQ/i.test(userAgent),
  isWebpEnv,
  appInfo
}