禁用了 浏览器与windos的UI缩放

优化了高低分辨率下的显示缩放

src/App.vue

@@ -1,23 +1,55 @@
 <template>
-  <!--<dv-full-screen-container id="app">-->
-  <div id="app">
+  <!--<dv-full-screen-container style="display: flex;flex-direction: column;height:1080px;width:1920px;">-->
+  <div id="app"
+       :class="screenHeight>500&&screenHeight<760?'appWindowSize1366':(
+                 screenHeight>760&&screenHeight<900?'appWindowSize1440':(
+                 screenHeight>900&&screenHeight<1070?'appWindowSize1920':''
+                 ))">
+    <!--大于上一个尺寸的最大基数小于当前尺寸的最大基数-->
     <router-view />
   </div>
   <!--</dv-full-screen-container>-->
 </template>
 
 <script>
-export default  {
-  name:  'App',
+  export default  {
+    name:  'App',
+    data() {
+      return {
+        screenHeight:'',
+        screenWidth:'',
+        num:this.screenHeight - 100,
+      }
+    },
     metaInfo() {
-        return {
-            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
-            titleTemplate: title => {
-                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
-            }
-        }
-    }
-}
+      return {
+        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+        titleTemplate: title => {
+          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+        },
+      }
+    },
+    mounted(){
+      this.screenHeight = screen.height;
+      this.screenWidth = document.body.clientWidth;
+      console.log("document.body.clientWidth",document.body.clientWidth);
+      console.log("screen.height",screen.height);
+      document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`
+      if(document.body.clientWidth<1540){
+        document.getElementById('app').style.marginLeft = '-'+((1-document.body.clientWidth/1920)*1920/2)+'px'
+        document.getElementById('app').style.marginTop = '-'+((1-document.body.clientWidth/1920)*1080/2)+'px'
+      }
+      window.onresize = () => {
+        return (() => {
+          document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`
+          if(document.body.clientWidth<1540){
+            document.getElementById('app').style.marginLeft = '-'+((1-document.body.clientWidth/1920)*1920/2)+'px'
+            document.getElementById('app').style.marginTop = '-'+((1-document.body.clientWidth/1920)*1080/2)+'px'
+          }
+        })();
+      };
+    },
+  }
 </script>
 <style>
   html,body{
@@ -25,8 +57,26 @@ export default  {
     height:100%;
     width:100%;
   }
+
+  body::-webkit-scrollbar{
+    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 4px;
+  }
+  body::-webkit-scrollbar-thumb{
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 5px #999;
+    background: #fff;
+  }
+  body::-webkit-scrollbar-track{
+    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
+    border-radius: 0;
+    background: rgba(255,255,255,0);
+  }
   #app{
-    height:100%!important;
-    width:100%!important;
+    height:1080px;
+    width:1920px;
+    display: flex;
+    flex-direction: column;
+    flex:1;
   }
 </style>

src/utils/devicePixelRatio.js

@@ -0,0 +1,57 @@
+class DevicePixelRatio {
+  constructor() {
+    // this.flag = false;
+  }
+  // 获取系统类型
+  _getSystem() {
+    // let flag = false;
+    var agent = navigator.userAgent.toLowerCase();
+    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+    //		if(isMac) {
+    //			return false;
+    //		}
+    // 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
+    if (agent.indexOf('windows') >= 0) {
+      return true;
+    }
+  }
+  // 获取页面缩放比例
+  //	_getDevicePixelRatio() {
+  //		let t = this;
+  //	}
+  // 监听方法兼容写法
+  _addHandler(element, type, handler) {
+    if (element.addEventListener) {
+      element.addEventListener(type, handler, false);
+    } else if (element.attachEvent) {
+      element.attachEvent('on' + type, handler);
+    } else {
+      element['on' + type] = handler;
+    }
+  }
+  // 校正浏览器缩放比例
+  _correct() {
+    let t = this;
+    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
+    document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
+  }
+  // 监听页面缩放
+  _watch() {
+    let t = this;
+    t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize
+      // 重新校正
+      t._correct()
+    })
+  }
+  // 初始化页面比例
+  init() {
+    let t = this;
+    if (t._getSystem()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例
+      // 初始化页面校正浏览器缩放比例
+      t._correct();
+      // 开启监听页面缩放
+      t._watch();
+    }
+  }
+}
+export default DevicePixelRatio;

src/views/home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home" :class="userType != 22&&initPage == 'true' ? 'home-class' : ''">
     <!--<div class="button-max-box" v-if="userType != '22'">-->
-    <dv-full-screen-container v-if="userType != '22'&&initPage == 'true'" style="display: flex;flex-direction: column;flex:1;">
+    <!--<dv-full-screen-container v-if="userType != '22'&&initPage == 'true'" style="display: flex;flex-direction: column;flex:1;">-->
       <home-navbar />
       <div class="max-big-home-box">
         <div class="max-home-button-box">
@@ -163,7 +163,7 @@
         </div>
       </div>
       <div class="bottom-null-box"></div>
-    </dv-full-screen-container>
+    <!--</dv-full-screen-container>-->
     <backAnimation v-if="userType != '22'&&initPage == 'true'"></backAnimation>
   </div>
 </template>