处理缩放

src/utils/evicePixelRatio.js

+/**
+ * @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
+ * **/
+
+class DevicePixelRatio {
+  constructor() {}
+  //获取系统类型
+  _getSystem() {
+    let flag = false;
+    var agent = navigator.userAgent.toLowerCase();
+    if (agent.indexOf("windows") >= 0) {
+      return true;
+    }
+  }
+  //获取页面缩放比例
+  _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.getElementById('main').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;
\ No newline at end of file

src/views/complete.vue

 <template>
   <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
-    <div class="main_content">
+    <div class="main_content" id="main">
       <img class="page-bg" src="../assets/images/gesture/massage-entry-fullbg.png" alt srcset />
       <div class="massage-complete-modal noBaby">
         <div class="title">
@@ -10,7 +10,7 @@
         </div>
         <!-- <div class="record" v-if="finalBabyStatus != 3 && finalBabyStatus != -1">
           <div>{{$t('strings.completeText2')}}: {{time}}s</div>
-        </div> -->
+        </div>-->
         <div class="bottom">
           <light-button @click="goHome" :text="$t('strings.completeButtonText')"></light-button>
         </div>
@@ -22,6 +22,7 @@
 <script>
 import { calcAdapt, isMobile } from "../common/util";
 import lightButton from "../components/lightButton.vue";
+import DevicePixelRatio from "../utils/evicePixelRatio.js";
 
 let calcs = calcAdapt();
 let scale;
@@ -89,7 +90,11 @@ export default {
     this.time = time || 0;
     this.total = total || 0;
   },
-  mounted() {}
+  mounted() {
+    this.$nextTick(() => {
+      new DevicePixelRatio().init();
+    });
+  }
 };
 </script>
 

src/views/index.vue

 <template>
   <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
-    <div class="main_content" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
+    <div class="main_content" id="main" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
       <div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}" :style="{'height':topHeiht}">
         <div class="page_title">{{$t('strings.homeTitle')}}</div>
         <div class="picture-box" :style="{'transform': scale>0?'scale('+scale+')':''}">
@@ -51,6 +51,7 @@ import {
   getSystemInfo
 } from "../common/util";
 import lightButton from "../components/lightButton.vue";
+import DevicePixelRatio from "../utils/evicePixelRatio.js";
 
 let calcs = calcAdapt();
 let scale;
@@ -666,6 +667,9 @@ export default {
     }
   },
   mounted() {
+    this.$nextTick(() => {
+      new DevicePixelRatio().init();
+    });
     window.onresize = () => {
       return (() => {})();
     };