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 两边或上下留白  点击查看代码```null  <template>   <div class="MasScreenAuto">     <slot></slot>   </div> </template>  <script> export default {   name: 'MasScreenAuto',   data() {     return {}   },   mounted() {          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})`              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])              window.addEventListener('resize', function() {         let w2 = document.querySelector('html').clientWidth / 1920         let h2 = document.querySelector('html').clientHeight / 1080         let zoom2 = w2 < h2 ? w2 : h2                  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])                  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 宽度自适应，高度不够显示滚动条  点击查看代码```null  <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() {          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`;              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>  ```