1920*1080大屏（css中的zoom属性）

1.js代码（同时使用了原生和jq，可自己分开）

1.style.zoom属性，获取最外层div的包含padding的长度和宽度(clientWidth和clientHeight), 比较长度和宽度的比例，
使style.zoom等于较小的比例，如果宽度大于高度就让宽度为1920px，否则就不做操作，让高度由内容撑开。
2.$(window).resize(function(){}) //作用是当浏览器尺寸发生变化时，重新执行一遍上面的操作
try {
            if (document.querySelector(".MasScreenAuto")) {
                $(document).ready(function () {
                    var w = document.querySelector("html").clientWidth / 1920;
                    var h = document.querySelector("html").clientHeight / 1080;
                    document.querySelector(".MasScreenAuto").style.zoom = w < h ? w : h;
                    if (w > h) {
                        document.querySelector(".MasScreenAuto").style.width = "1920px";
                    }
                    $(window).resize(function () {
                        var w2 = document.querySelector("html").clientWidth / 1920;
                        var h2 = document.querySelector("html").clientHeight / 1080;
                        document.querySelector(".MasScreenAuto").style.zoom = w2 < h2 ? w2 : h2;
                        if (w2 > h2) {
                            document.querySelector(".MasScreenAuto").style.width = "1920px";
                        }
                    });
                });
            }
        } catch (e) {
            console.log(e);
        }

2.例子(需要自行引入jq (我引入了3.2.1版本))

1.html 代码
<div class="largeGreen MasScreenAuto">
        <div class="box">
            <div class="item">等比例缩放</div>
            <div class="item">不会存在页面被遮挡情况</div>
            <div class="item">注意css</div>
            <div class="item">可原生可js</div>
        </div>
        <div class="box2">11</div>
</div>

2.css代码
<style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            width: 100%;
            height: 100%;
            color: #fff;
        }

        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
        }

        .largeGreen {
            width: 100%;
            background: url("img/bg.png") left top no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }

        .box {
            width: 100%;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item {
            width: 600px;
            height: 200px;
            background-color: orange;
            font-size: 80px;
        }

        .box2 {
            width: 100%;
            height: 300px;
            margin-top: 20px;
            font-size: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
</style>
3.效果（复制链接查看）
![image](https://img2022.cnblogs.com/blog/2211708/202207/2211708-20220711142226979-1555915210.png)

![image](https://img2022.cnblogs.com/blog/2211708/202207/2211708-20220711142232257-1830674597.png)

3.自定义大屏组件 （1）超出1920 * 1080 两边或上下留白

点击查看代码

<!-- 大屏可视化模板页，开发大屏可视乎页面时使用此模板，能够进行矢量级缩放。按照UI图纸1920x1080进行开发 -->
<template>
  <div class="MasScreenAuto">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MasScreenAuto',
  data() {
    return {}
  },
  mounted() {
    /**
     * 1920*1080标准适配方案
     */
    try {
      let domApp = document.querySelector('.MasScreenAuto')
      let w = document.querySelector('html').clientWidth / 1920
      let h = document.querySelector('html').clientHeight / 1080
      let zoom = w < h ? w : h
      domApp.style.transform = `scale(${zoom})`
      // echarts 样式异常处理
      let cssStyle = `.MasScreenAutoe chartsDom canvas{transform:scale(${zoom})};`
      let styleNode = document.createElement('style')
      styleNode.type = 'text/css'
      if (styleNode.styleSheet) {
        styleNode.styleSheet.cssText = cssStyle
      } else {
        styleNode.innerHTML = cssStyle
      }
      let StyleDom = document.getElementsByTagName('head')[0]
      StyleDom.insertBefore(styleNode, StyleDom.childNodes[0])
      // end
      window.addEventListener('resize', function() {
        let w2 = document.querySelector('html').clientWidth / 1920
        let h2 = document.querySelector('html').clientHeight / 1080
        let zoom2 = w2 < h2 ? w2 : h2
        // echarts 样式异常处理
        let cssStyle2 = `.MasScreenAuto canvas{zoom:${1 / zoom2};transform:scale(${zoom2})};`
        let styleNode2 = document.createElement('style')
        styleNode2.type = 'text/css'
        if (styleNode2.styleSheet) {
          styleNode2.styleSheet.cssText = cssStyle2
        } else {
          styleNode2.innerHTML = cssStyle2
        }
        let StyleDom2 = document.getElementsByTagName('head')[0]
        StyleDom2.insertBefore(styleNode2, StyleDom2.childNodes[0])
        // end
        document.querySelector('.MasScreenAuto').style.transform = `scale(${zoom2})`
      })
    } catch (e) {
      console.log(e)
    }
  }
}
</script>

<style>
.MasScreenAuto {
  width: 1920px;
  height: 1080px;
}
.MasScreenAuto canvas {
  transform-origin: 0% 0%;
}
</style>

4.自定义大屏组件（2）1920 * 1080 宽度自适应，高度不够显示滚动条

点击查看代码

<!-- 大屏可视化模板页，开发大屏可视乎页面时使用此模板，能够进行矢量级缩放。按照UI图纸1920x1080进行开发 -->
<template>
  <div class="go-preview scrollY">
    <el-scrollbar>
      <div class="go-preview-entity">
        <div class="go-preview-scale">
          <div class="MasScreenAuto">
            <slot></slot>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "MasScreenAuto",
  data() {
    return {};
  },
  mounted() {
    /**
     * 1920*1080标准适配方案
     */
    try {
      let domApp = document.querySelector(".go-preview-entity");
      let w = document.querySelector("html").clientWidth;
      let h = 1080 * w / 1920;
      let zoomW = document.querySelector("html").clientWidth / 1920;
      document.querySelector(".go-preview-scale").style.transform = `scale(${zoomW},${zoomW})`;
      domApp.style.width = `${w}px`;
      domApp.style.height = `${h}px`;
      // end
      window.addEventListener("resize", function () {
        let w2 = document.querySelector("html").clientWidth;
        let h2 = 1080 * w2 / 1920;
        let zoomW2 = document.querySelector("html").clientWidth / 1920;
        document.querySelector(".go-preview-scale").style.transform = `scale(${zoomW2},${zoomW2})`;
        domApp.style.width = `${w2}px`;
        domApp.style.height = `${h2}px`;
      });
    } catch (e) {
      console.log(e);
    }
  },
};
</script>

<style>
.MasScreenAuto{
    width: 1920px;
    height: 1080px;
    position: relative;
}
.MasScreenAuto canvas{
    transform-origin:0% 0%;
}
.scrollY{
  overflow-x: hidden;
}
.go-preview{
  position: relative;
  height: 100%;
  width: 100%;
}
.go-preview .go-preview-entity {
    overflow: hidden;
}
.go-preview.scrollY .go-preview-scale {
    transform-origin: left top;
}
</style>

5.vue3大屏响应式

<div class="dataScreen-content" ref="dataScreenRef"></div>
const dataScreenRef = ref<HTMLElement | null>(null);

onMounted(() => {
  if (dataScreenRef.value) {
	dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	dataScreenRef.value.style.width = `1920px`;
	dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
	dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});