强制横屏

public/index.html

@@ -4,6 +4,10 @@
     <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"
+    />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
     <title>视频监控可视化平台</title>

src/assets/css/reset.css

@@ -9,7 +9,6 @@ body,
 .wrapper {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 body {

src/components/common/Home.vue

@@ -24,6 +24,32 @@ 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);
+    },
+  },
   created() {},
 };
 </script>
@@ -46,6 +72,23 @@ export default {
     box-sizing: border-box;
   }
 }
+
+@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;