js 获取浏览器页面信息判断pc\android\ios，缩放比例修改zoom

export default {
  data() {
    return {
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      zoom: 1,
      isIOS: false,
      isPC: true,
    };
  },
  watch: {
    windowHeight(val) {
      let that = this;
      console.log("实时屏幕高度：", val, that.windowHeight);
    },
    windowWidth(val) {
      let that = this;
      console.log("实时屏幕宽度：", val, that.windowWidth);
    },
    zoom(val) {
      let that = this;
      console.log("实时缩放比例：", val, that.zoom);
      if (that.isPC) {
        window.document.body.style.zoom = 100 / that.zoom;
      } else {
        window.document.body.style.zoom = 1;
      }
    },
  },
 
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    that.browserRedirect();
    that.zoom = that.detectZoom();
    window.onresize = () => {
      return (() => {
        console.log("屏幕变化");
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.windowHeight = window.fullHeight; // 高
        that.windowWidth = window.fullWidth; // 宽
        that.browserRedirect();
        that.zoom = that.detectZoom();
      })();
    };
    var u = navigator.userAgent;
    if (u.indexOf("miniProgram") != -1) {
      console.log("小程序=》" + u);
    } else {
      console.log("网页=》" + u);
      //在微信网页
    }
  },
  methods: {
    getIOSType() {
      //跳转移动端页面
      let ran = navigator.userAgent;
      let isAndroid = ran.indexOf("Android") > -1 || ran.indexOf("Linux") > -1;
      let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroid) {
        this.isIOS = false;
      }
      if (isIOS) {
        this.isIOS = true;
      }
    },
    browserRedirect() {
      const that = this;
      const sUserAgent = navigator.userAgent.toLowerCase();
      if (
        /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
          sUserAgent
        )
      ) {
        that.isPC = false;
        this.getIOSType();
      } else {
        that.isPC = true;
      }
    },
 
    // 方法
    detectZoom() {
      let ratio = 0;
      const screen = window.screen;
      const ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf("msie")) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (
        window.outerWidth !== undefined &&
        window.innerWidth !== undefined
      ) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      console.log(ratio);
      return ratio;
    },
  },
};