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"};
      ${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>

不适合有私有样式的结构部分,例如富文本回显的html结构。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值