修改兼容

src/views/bigScreen/components/bigScreenHead/index.vue

@@ -56,19 +56,19 @@ export default {
 
 <style lang="scss" scoped>
 .bigScreenHead {
-  width: 1920px;
-  height: 100px;
+  width: 10rem /* 1920/192 */;
+  height: .520833rem /* 100/192 */;
   background-image: url(./bg.png);
-  background-size: 100% 80px;
+  background-size: 100% .416667rem /* 80/192 */;
   background-repeat: no-repeat;
   .tit {
-    font-size: 36px;
+    font-size: .1875rem /* 36/192 */;
     font-family: YouSheBiaoTiHei;
     color: #91d5fe;
-    line-height: 47px;
-    letter-spacing: 6px;
+    line-height: .244792rem /* 47/192 */;
+    letter-spacing: .03125rem /* 6/192 */;
     text-align: center;
-    padding-top: 13px;
+    padding-top: .067708rem /* 13/192 */;
   }
 }
 </style>

src/views/bigScreen/components/scaleBox.vue

@@ -1,15 +1,30 @@
 <template>
-  <div style="background-color: #000;height: 100%;width:100%">
-      <div class="ScaleBox" ref="ScaleBox" :style="{
-      width: width + 'px',
-      height: height + 'px'
+  <div class="scaleBoxWrap">
+    <div class="ScaleBox" ref="ScaleBox" :style="{
+      width: ScaleBoxWidth + 'px',
+      height: ScaleBoxHeight + 'px'
     }">
-    <slot></slot>
-  </div>
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
+let docEl = document.documentElement;
+// 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
+let dpr = window.devicePixelRatio || 1;
+//根据分辨率调整全局字体大小
+function setBodyFontSize () {
+  // html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
+  if (document.body) {
+    document.body.style.fontSize = 12 * dpr + "px";
+  } else {
+    // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
+    document.addEventListener("DOMContentLoaded", setBodyFontSize);
+  }
+}
+setBodyFontSize();
+
 export default {
   name: 'ScaleBox',
   props: {},
@@ -17,31 +32,74 @@ export default {
     return {
       scale: 0,
       width: 1920,
-      height: 1080
+      height: 1080,
+      ScaleBoxWidth: 1920,
+      ScaleBoxHeight: 1080,
+      style: {
+        width: '100%',
+      }
     }
   },
   mounted () {
     this.setScale()
     window.addEventListener('resize', this.debounce(this.setScale))
+    window.addEventListener("pageshow", function (e) {
+      // 若是浏览器中点击后退时显示页面，则重置rem
+      if (e.persisted) {
+        setRemUnit();
+      }
+    });
+    if (dpr >= 2) {
+      var fakeBody = document.createElement("body");
+      var testElement = document.createElement("div");
+      testElement.style.border = ".5px solid transparent";
+      fakeBody.appendChild(testElement);
+      docEl.appendChild(fakeBody);
+      if (testElement.offsetHeight === 1) {
+        docEl.classList.add("hairlines");
+      }
+      docEl.removeChild(fakeBody);
+    }
   },
   methods: {
     getScale () {
+
+
       const { width, height } = this
       const wh = window.innerHeight / height
       const ww = window.innerWidth / width
-      console.log(ww < wh ? ww : wh)
+      console.log('wh', wh)
+      console.log('ww', ww)
+      if (wh > ww) {
+        this.ScaleBoxWidth = window.innerWidth;
+        this.ScaleBoxHeight = window.innerWidth * (height / width);
+
+      } else {
+        this.ScaleBoxWidth = window.innerHeight * (width / height);
+        this.ScaleBoxHeight = window.innerHeight;
+      }
+      this.setRemUnit();
       return ww < wh ? ww : wh
     },
     setScale () {
+      this.getScale()
       // if (window.innerHeight == 1080) {
       //   this.height = 1080
       // } else {
       //   this.height = 937
       // }
-      this.scale = this.getScale()
-      if (this.$refs.ScaleBox) {
-        this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
-      }
+      // this.scale = this.getScale()
+      // console.log(this.scale)
+      // if (this.$refs.ScaleBox) {
+      //   this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
+      // }
+    },
+
+    // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
+    setRemUnit () {
+      var rem = this.ScaleBoxWidth / 10;
+      // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
+      docEl.style.fontSize = rem + "px";
     },
     debounce (fn, delay) {
       const delays = delay || 500
@@ -63,19 +121,31 @@ export default {
 </script>
 
 <style lang="scss">
-#ScaleBox {
-  --scale: 1;
+.scaleBoxWrap {
+  display: flex;
+  display: -webkit-flex;
+  background-color: #000;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
 }
 .ScaleBox {
-  position: absolute;
-  transform: scale(var(--scale)) translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  transform-origin: 0 0;
-  left: 50%;
-  top: 50%;
   transition: 0.3s;
-  z-index: 999;
-  // background: rgba(255, 0, 0, 0.3);
 }
+// #ScaleBox {
+//   --scale: 1;
+// }
+// .ScaleBox {
+//   position: absolute;
+//   transform: scale(var(--scale)) translate(-50%, -50%);
+//   display: flex;
+//   flex-direction: column;
+//   transform-origin: 0 0;
+//   left: 50%;
+//   top: 50%;
+//   transition: 0.3s;
+//   z-index: 999;
+//   // background: rgba(255, 0, 0, 0.3);
+// }
 </style>