前端解决web端 125%，150%缩放，1366*768分辨率兼容问题

最近做一个需求是在web项目中打开一个新的标签页，新的标签页是要适应大屏的，但是同时要适应125%，150%缩放，1366*768分辨率兼容。所以单独对这个页面进行了兼容处理

mounted () {
    window.addEventListener('resize', this.recalc, false);
    this.recalc();
  },
 methods: {
    recalc () {
      // 解决 125%，150%缩放，1366*768分辨率兼容问题
      // domEl为需要缩放的页面的根元素
      const domEl = this.$refs.workingRef;
      if (!domEl) return;
      const { clientWidth, clientHeight } = document.documentElement || document.body || {};
      const scaleX = clientWidth / 1920;    // 分母是设计稿的宽度
      const scaleY = clientHeight / 1080;   // 分母是设计稿的高度
      domEl.style.transform = `scale(${scaleX})`;
      domEl.style.transformOrigin = "top left";
      // 按照宽度的比例缩放后底部会出现空白，再用marginBottom解决这个空白问题
      domEl.style.marginBottom = (scaleY - scaleX) * 1080 + 'px';  
    },
}
beforeDestroy () {
    window.removeEventListener('resize', this.recalc);
  },
  
<style lang="scss" scoped>
.working {
  width: 1920px;
  height: 1080px;
 }
</style>