feats

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta name="screen-orientation" content="portrait">
     <!-- <script src="./wx/jweixin-1.6.0.js"></script> -->
     <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
     <script src="./jquery.1.9.1.js"></script>
@@ -33,12 +34,23 @@
 
       #vid-cover .goback {
         position: fixed;
-        right: 10px;
         top: 10px;
         width: 50px;
         height: 50px;
+      }
 
-        transform: rotate(90deg);
+      /* 横屏 */
+      @media all and (orientation : landscape) {
+        #vid-cover .goback {
+          left: 10px;
+        }
+      }
+      /* 竖屏 */
+      @media all and (orientation : portrait) {
+        #vid-cover .goback {
+          right: 10px;
+          transform: rotate(90deg);
+        }
       }
     </style>
   </head>

src/pages/pg1/video.vue

@@ -77,19 +77,33 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
+
+/* 横屏 */
+@media all and (orientation : landscape) {
+  .video-pg {
+    width: 100vw;
+    height: 100vh;
+  }
+}
+
+/* 竖屏 */
+@media all and (orientation : portrait) {
+  .video-pg {
+    width: 100vh;
+    height: 100vw;
+    transform-origin: center left;
+    transform: rotate(90deg) translate3d(-50vw, -50vw, 0);
+  }
+}
+
 .video-pg {
   position: relative;
   background-color: #000;
   overflow: hidden;
-  width: 100vh;
-  height: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  transform-origin: center left;
-  transform: rotate(90deg) translate3d(-50vw, -50vw, 0);
-
   .goback {
     position: fixed;
     z-index: 20001;
@@ -100,7 +114,6 @@ onMounted(() => {
   video {
     flex: none;
     width: 90%;
-    z-index: 90%;
   }
 }
 </style>