计算容器 16:9

src/views/coursewarePlay/index.tsx

@@ -49,17 +49,14 @@ export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
     const handleInit = (type = 0) => {
+      // 计算容器 16:9
+      setContainer()
       // 横屏
       postMessage({
         api: 'setRequestedOrientation',
         content: {
           orientation: type
         }
-      }, () => {
-        console.log('横屏回调')
-        nextTick(() => {
-          setContainer()
-        })
       })
       // 头,包括返回箭头
       postMessage({
@@ -86,15 +83,16 @@ export default defineComponent({
       width: '100vw'
     })
     const setContainer = () => {
-      let width = screen.height * (16 / 9)
+      let min = Math.min(screen.width, screen.height)
+      let max = Math.max(screen.width, screen.height)
+      let width = min * (16 / 9)
       console.log('计算的屏幕宽度', width, screen.width)
-      if (width > screen.width) {
+      if (width > max){
         return
       }
       parentContainer.width = width + 'px'
       console.log('设置宽度', parentContainer.width)
     }
-    // window.addEventListener('resize', setContainer)
 
     const route = useRoute()
     const headeRef = ref()