强制横屏

2 years ago · d4f1258bcb
parent fddc03dee3
commit d4f1258bcb
3 changed files with 53 additions and 62 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,10 +3,9 @@
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta
      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
--- a/src/App.vue
+++ b/src/App.vue
@ -7,25 +7,51 @@
 export default {
  name: "App",
  data() {
-    return {
-      pageScreen: window.innerWidth,
-    };
-  },
-  mounted() {
-    this.pageWidth();
-  },
-  methods: {
-    pageWidth() {
-      console.log(this.pageScreen);
-      window.addEventListener("resize", () => {
-        this.pageScreen = window.innerWidth;
-      });
-    },
-  },
-  created() {
-    //new DevicePixelRatio().init();
+    return {};
  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
 };
 </script>

-<style lang="less"></style>
+<style lang="less">
+// @media only screen and (orientation: portrait) and (max-width: 768px) {
+//   /*竖屏 css*/
+//   // 需求代码
+//   html {
+//     width: 100vmin !important;
+
+//     height: 100vmax !important;
+//   }
+
+//   body {
+//     width: 100vmin !important;
+
+//     height: 100vmax !important;
+//   }
+
+//   #app {
+//     width: 100vmax !important;
+
+//     height: 100vmin !important;
+
+//     transform-origin: top left;
+
+//     transform: rotate(90deg) translate(0, -100vmin);
+//   }
+//   .el-menu--horizontal {
+//   }
+// }
+
+// landscape 为判断为横屏
+
+@media only screen and (orientation: landscape) and (max-height: 600px) {
+  /*横屏 css*/
+  // 需求代码
+  #app {
+    //background: #f00;
+  }
+}
+</style>
--- a/src/components/common/Home.vue
+++ b/src/components/common/Home.vue
@ -24,32 +24,8 @@ export default {
  components: {
    vHead,
  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.forceLandscapeScreenHandle();
-
-      // 这里监控
-      this.onWindowSizeChanged();
-    },
-
-    forceLandscapeScreenHandle() {
-      const body = document.getElementsByTagName("body")[0];
-      const html = document.getElementsByTagName("html")[0];
-      const width = html.clientWidth;
-      const height = html.clientHeight;
-      const max = width > height ? width : height;
-      const min = width > height ? height : width;
-      body.style.width = max + "px";
-      body.style.height = min + "px";
-    },
-
-    onWindowSizeChanged() {
-      window.addEventListener("resize", this.forceLandscapeScreenHandle);
-    },
-  },
+  mounted() {},
+  methods: {},
  created() {},
 };
 </script>
@ -73,22 +49,6 @@ export default {
  }
 }

-@media screen and (orientation: portrait) {
-  /*竖屏样式*/
-  #app {
-    transform-origin: 0 0;
-    transform: rotateZ(90deg) translateY(-100%);
-  }
-}
-
-// @media screen and (orientation: landscape) {
-//   /*这是横屏模式，所以您需要做一些不一样的事情*/
-//   #app {
-//     // position : absolute ;
-//     transform: rotate(0deg);
-//     transform-origin: 0% 0%;
-//   }
-// }
@media (max-width: 900px) {
  .greenStyle .header {
    // background: #000;
@ -267,6 +227,12 @@ export default {
          margin-top: 120px !important;
        }
      }
+      .parameterSetDialog {
+        .el-dialog {
+          width: 100% !important;
+          margin-top: 140px !important;
+        }
+      }
    }
    //realTimeSearch历史图片
    .realTimeSearch {