移动端横屏适配

package.json

@@ -15,6 +15,7 @@
     "amfe-flexible": "^2.2.1",
     "autoprefixer": "^10.4.7",
     "axios": "^0.21.1",
+    "schofe-flexible": "^1.0.0",
     "vue": "^3.2.25",
     "vue-i18n": "^9.1.10",
     "vue-router": "^4.0.3"

src/main.js

@@ -5,6 +5,7 @@ import './styles/index.scss' // global css
 import './assets/font/index.css';
 import router from './router'
 import 'amfe-flexible'
+// import 'schofe-flexible'
 import i18n from './lang/i18n.js'
 
 const app = createApp(App); // 挂载

src/views/complete.vue

@@ -77,6 +77,22 @@ export default {
       this.$router.push({
         path: "/"
       });
+    },
+    /**
+     * 添加触摸监听
+     */
+    addTouchmoveListener() {
+      document.body.addEventListener("touchmove", handleTouchmove, {
+        passive: false
+      }); //passive 参数不能省略，用来兼容ios和android
+    },
+    /**
+     * 移除触摸监听
+     */
+    removeTouchmoveListener() {
+      document.body.removeEventListener("touchmove", handleTouchmove, {
+        passive: false
+      });
     }
   },
   created() {
@@ -85,10 +101,14 @@ export default {
     if (lang) {
       this.$i18n.locale = lang;
     }
-    document.body.addEventListener("touchmove", handleTouchmove, {
-      passive: false
-    }); //passive 参数不能省略，用来兼容ios和android
     this._isMobile = isMobile();
+    if (
+      this._isMobile &&
+      document.body.clientHeight >= document.body.clientWidth
+    ) {
+      // 竖屏
+      this.addTouchmoveListener();
+    }
     let lying = this.$route.query.lying;
     let time = this.$route.query.totalDuration;
     let total = this.$route.query.totalDuration;
@@ -100,6 +120,18 @@ export default {
     this.$nextTick(() => {
       new DevicePixelRatio().init();
     });
+    window.onresize = () => {
+      return (() => {
+        // 判断横竖屏
+        let width = document.documentElement.clientWidth;
+        let height = document.documentElement.clientHeight;
+        if (width > height) {
+          this.removeTouchmoveListener();
+        } else {
+          this.addTouchmoveListener();
+        }
+      })();
+    };
   },
   unmounted() {
     document.body.removeEventListener("touchmove", handleTouchmove, {
@@ -293,4 +325,15 @@ export default {
     }
   }
 }
+// 横屏
+@media only screen and (orientation: landscape) {
+  .page {
+    &.mobile {
+      height: 812px;
+      .main_content {
+        height: 100%;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file

src/views/index.vue

@@ -932,6 +932,22 @@ export default {
       } else {
         this.showNoCameraDialog = true;
       }
+    },
+    /**
+     * 添加触摸监听
+     */
+    addTouchmoveListener() {
+      document.body.addEventListener("touchmove", handleTouchmove, {
+        passive: false
+      }); //passive 参数不能省略，用来兼容ios和android
+    },
+    /**
+     * 移除触摸监听
+     */
+    removeTouchmoveListener() {
+      document.body.removeEventListener("touchmove", handleTouchmove, {
+        passive: false
+      });
     }
   },
   created() {
@@ -940,9 +956,6 @@ export default {
       lying = ~~this.$route.query.lying;
     }
     this.lying = lying;
-    document.body.addEventListener("touchmove", handleTouchmove, {
-      passive: false
-    }); //passive 参数不能省略，用来兼容ios和android
     let { scale } = getSystemInfo();
     if (scale > 1 && scale < 2) {
       this.scale = 1 - (scale - 1) / 100;
@@ -988,19 +1001,33 @@ export default {
       this.cTb = calcCoord({ minTop: 30, maxTop: 30 }).top / 75 + "rem"; // title bottom
       this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top / 75 + "rem"; // content
     }
+    if (
+      this._isMobile &&
+      document.body.clientHeight >= document.body.clientWidth
+    ) {
+      // 竖屏
+      this.addTouchmoveListener();
+    }
   },
   mounted() {
     this.$nextTick(() => {
       new DevicePixelRatio().init();
     });
     window.onresize = () => {
-      return (() => {})();
+      return (() => {
+        // 判断横竖屏
+        let width = document.documentElement.clientWidth;
+        let height = document.documentElement.clientHeight;
+        if (width > height) {
+          this.removeTouchmoveListener();
+        } else {
+          this.addTouchmoveListener();
+        }
+      })();
     };
   },
   unmounted() {
-    document.body.removeEventListener("touchmove", handleTouchmove, {
-      passive: false
-    });
+    this.removeTouchmoveListener();
   }
 };
 </script>
@@ -1219,7 +1246,6 @@ export default {
         transition: opacity 0.8s ease;
       }
       &.big {
-
         .top-text {
           margin: 45.5px auto 10px auto;
         }
@@ -1458,6 +1484,7 @@ export default {
     }
   }
 }
+
 .mobile {
   .main_content {
     width: 10rem;
@@ -1644,7 +1671,7 @@ export default {
         display: flex;
         position: absolute;
         left: 0;
-        bottom: .5333rem;
+        bottom: 0.5333rem;
         width: 100%;
         flex-direction: column;
         justify-content: center;
@@ -1800,7 +1827,7 @@ export default {
             &.points-5 {
               width: 5.3333rem;
               position: absolute;
-              right: .0667rem;
+              right: 0.0667rem;
               bottom: -2.1067rem;
               .points-text {
                 width: 5.0133rem;
@@ -1810,11 +1837,11 @@ export default {
                 left: 1.1467rem;
                 top: -1.68rem;
                 height: 1.3467rem;
-                width: .0267rem;
+                width: 0.0267rem;
                 overflow: hidden;
               }
               .line {
-                width: .0267rem;
+                width: 0.0267rem;
               }
             }
           }
@@ -1906,4 +1933,25 @@ export default {
     }
   }
 }
+// 横屏
+@media only screen and (orientation: landscape) {
+  .page {
+    &.mobile {
+      height: auto;
+      .main_content {
+        min-height: calc(var(--vh, 1vh) * 100) !important;
+        .briefsummary-box {
+          overflow: unset;
+          position: relative;
+          .briefsummary-content {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+// 竖屏
+@media only screen and (orientation: portrait) {
+}
 </style>

src/views/startIndex.vue

@@ -465,6 +465,7 @@ export default {
     }
   }
 }
+
 .mobile {
   .main_content {
     width: 10rem;

vite.config.js

@@ -3,6 +3,7 @@ import {
 } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import postcss100vhFix from 'postcss-100vh-fix'
+import postCssPxToRem from 'postcss-pxtorem'
 
 const config = require('./config')
 
@@ -15,6 +16,12 @@ export default defineConfig({
     postcss: {
       plugins: [
         postcss100vhFix,
+        postCssPxToRem({
+          rootValue: 37.5, // 1rem 的大小
+          propList: ['*'], // 需要转换的属性，*(全部转换)
+          selectorBlackList: ['pc'],
+          unitPrecision: 6 // 转换精度，保留的小数位数
+        })
       ]
     }
   },