Vue项目判断 是移动端还是PC , 微信 , iOS , 安卓

场景 如果是移动端, 则进入h5页面去download,如果是PC 则进入官网首页

方案

Vue项目判断 是移动端还是PC , 微信 , iOS , 安卓_第1张图片

 methods: {
    // 判断移动端还是pc端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    }
  },
  mounted() {
    if (this._isMobile()) {
      console.log('isMobile')
      this.$router.push({ name: 'mobile' })
    }
  }

场景 在移动端 点击下载后, 判断 是微信 安卓 iOS

Vue项目判断 是移动端还是PC , 微信 , iOS , 安卓_第2张图片

  downLoad() {
      let ua = navigator.userAgent.toLowerCase()
      //android终端
      let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1 //ios终端
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      if (isWeixinBrowser()) {
        this.ShowDark = !this.ShowDark
        alert('我是微信')
      } else {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //ios
          alert('ios')
          window.location = 'http://www.baidu.com'
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //android
          alert('安卓')
          window.location = 'http://www.taobao.com'
        }
      }

      function isWeixinBrowser() {
        return /micromessenger/.test(ua) ? true : false
      }
    },
参考链接: https://blog.csdn.net/qq_39603448/article/details/87251424

你可能感兴趣的:(Vue项目,进入移动端,vue,android,ios)