vue页面适配

原文地址:https://blog.csdn.net/qq_41827547/article/details/90046516?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
原文稍作优化在 vue中使用

//APP.VUE 页面
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  mounted() {
  //这里1920是根据开发时的电脑分辨率确定,视情况而定
    (function(targetWidth = 1920) {
      const isFox =
        navigator.userAgent.indexOf("Firefox") > -1 ||
        window.navigator.userAgent.indexOf("Trident") > 0
          ? true
          : false;

      const style = document.createElement("style");
      style.innerHTML = `
    html {
      width:${targetWidth + "px"};
      overflow: hidden;
      ${isFox ? `transform-origin: top left;` : ""}
    }
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    `;
      document.head.appendChild(style);

      let adjustWindow = () => {
        const ratio = window.innerWidth / targetWidth;
        const htmlHeight =
          (window.innerHeight * targetWidth) / window.innerWidth + "px";

        document.documentElement.style.height = htmlHeight;
        if (isFox) {
          document.documentElement.style.transform = `scale(${ratio})`;
        } else {
          document.documentElement.style.zoom = ratio;
        }
        document.documentElement.setAttribute("data-ratio", ratio);
      };
      adjustWindow();
      window.addEventListener("resize", adjustWindow);

      // 使鼠标坐标一致
      let x_get = Object.getOwnPropertyDescriptor(MouseEvent.prototype, "x")
        .get;
      let y_get = Object.getOwnPropertyDescriptor(MouseEvent.prototype, "y")
        .get;
      Object.defineProperties(MouseEvent.prototype, {
        R: {
          get: function() {
            return parseFloat(
              document.documentElement.getAttribute("data-ratio")
            );
          }
        },
        x: {
          get: function() {
            return x_get.call(this) / this.R;
          }
        },
        y: {
          get: function() {
            return y_get.call(this) / this.R;
          }
        }
      });
      if (isFox) {
        let getBoundingClientRect = Element.prototype.getBoundingClientRect;
        Element.prototype.getBoundingClientRect = function() {
          let value = getBoundingClientRect.call(this);
          let ratio = parseFloat(
            document.documentElement.getAttribute("data-ratio")
          );
          value = new Proxy(value, {
            get: function(target, proper) {
              return Reflect.get(target, proper) / ratio;
            }
          });
          return value;
        };
      }
    })();
  }
};
</script>
展开阅读全文
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值