项目开发中很多时候会遇到要求系统既要在pc中运行也可以在手机上访问的需求,这是时候就需要判断一下系统运行的平台来做页面适配。

 在main.js中添加如下代码

(function identifyDevicePlatform() {
  var os = function () {
    var ua = navigator.userAgent,
      isWindowsPhone = /(?:Windows Phone)/.test(ua),
      isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
      isAndroid = /(?:Android)/.test(ua),
      isFireFox = /(?:Firefox)/.test(ua),
      isChrome = /(?:Chrome|CriOS)/.test(ua),
      isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || 
                 (isFireFox && /(?:Tablet)/.test(ua)),
      isPhone = /(?:iPhone)/.test(ua) && !isTablet,
      isPc = !isPhone && !isAndroid && !isSymbian;
      return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
      };
    }();
  console.log('os', os)
  if (os.isAndroid || os.isPhone) {
    // 手机
    console.log("---------手机");
  } else if (os.isTablet) {
    // 平板
    console.log("---------平板");
  } else if (os.isPc) {
    // 电脑
    console.log("---------电脑");
  }
})();

 

把识别的平台保存在vuex中,在需要用的页面直接取即可

转载:

Logo

前往低代码交流专区

更多推荐