zc

src/App.vue

@@ -1,13 +1,10 @@
 <template>
-  <!--<dv-full-screen-container style="height:100%!important;">-->
     <div id="app">
       <router-view />
     </div>
-  <!--</dv-full-screen-container>-->
 </template>
 
 <script>
-  // import DevicePixelRatio from '@/utils/devicePixelRatio'
   export default  {
     name:  'App',
     metaInfo() {
@@ -18,19 +15,13 @@
         },
       }
     },
-    // created() {
-    //   new DevicePixelRatio().init()
-    // },
     mounted(){
       this.banZoom();
-      // let cssText1 = '.el-dialog{transform:scale('+document.documentElement.clientWidth / 1920+')}'
-      // let cssText2 = '.el-message-box{transform:scale('+document.documentElement.clientWidth / 1920+')}'
-      // let cssText3 = '.el-tooltip__popper{transform:scale('+document.documentElement.clientWidth / 1920+')}'
-      // this.insertCSS(cssText1);
-      // this.insertCSS(cssText2);
-      // this.insertCSS(cssText3);
+      //根据当前浏览器宽度与额定尺寸计算transform缩放值
       document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
+      //根据当前浏览器宽度与额定尺寸计算当前浏览器可观看尺寸高度
       document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
+      //当尺寸改变后从新计算
       window.onresize = () => {
         return (() => {
           document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
@@ -67,27 +58,6 @@
           passive: false
         })
       },
-      insertCSS (cssStyle) {
-        var style = document.createElement("style");
-        var theHead = document.head || document.getElementsByTagName('head')[0];
-        style.type = "text/css"; //IE需要设置
-        if (style.styleSheet) { //IE
-          var ieInsertCSS = function() {
-            try {
-              style.styleSheet.cssText = cssStyle;
-            } catch (e) {}
-          };
-          //若当前styleSheet不能使用，则放到异步中
-          if (style.styleSheet.disable) {
-            setTimeout(ieInsertCSS, 10);
-          } else {
-            ieInsertCSS();
-          }
-        } else { //W3c浏览器
-          style.appendChild(document.createTextNode(cssStyle));
-          theHead.appendChild(style);
-        }
-      }
     }
   }
 </script>

src/utils/devicePixelRatio.js

@@ -1,57 +0,0 @@
-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;