vue 移动端 学习总结中...

1. 适配问题

1. libflexible 和 postCss-px2 Rem 配合实现适配 rem

// 1. 安装 lib-flexible
npm install lib-flexible --save-dev

// 2. 引入 lib-flexible 在 main.js 中导入
import 'lib-flexible'

// 3. 在 index.html 中引入 flexible.js 的 cdn
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

// 4. 安装 postcss-px2remnpm
npm install postcss-px2remnpm --save-dev

// 5. 使用 在 vue.config.js 中 
module.exports = {
	css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            // 以设计稿750为例， 750 / 10 = 75
            remUnit: 75, //换算的基数，1rem == 75px
            exclude: /node_modules/i,
          }),
        ],
      },
    },
  },
}

2. 判断登陆设备

function so() {
  let ua = navigator.userAgent;
  let isWindowsPhone = /(?:Windows Phone)/.test(ua);
  let isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone;
  let isAndroid = /(?:Android)/.test(ua);
  let isFireFox = /(?:Firefox)/.test(ua);
  let isChrome = /(?:Chrome|CriOS)/.test(ua);
  let isTablet =
    /(?:iPad|PlayBook)/.test(ua) ||
    (isAndroid && !/(?:Mobile)/.test(ua)) ||
    (isFireFox && /(?:Tablet)/.test(ua));
  let isPhone = /(?:iPhone)/.test(ua) && !isTablet;
  let isPc = !isPhone && !isAndroid && !isSymbian;
  return {
    isTablet: isTablet,
    isPhone: isPhone,
    isAndroid: isAndroid,
    isPc: isPc,
  };
}

const os = so();

if (os.isAndroid || os.isPhone) {
  // 手机
  console.log("手机");
} else if (os.isTablet) {
  // 平板
  console.log("平板");
} else if (os.isPc) {
  // pc
  console.log("pc");
}

3. 屏幕展示方向

// 移动端 浏览器
export function screenDirection() {
  if (window.orientation == 180 || window.orientation == 0) {
    console.log("竖屏" );
  }
  if (window.orientation == 90 || window.orientation == -90) {
    console.log("横屏");
  }
}