解决 ios 100vh 不铺满屏幕适配问题。解决横竖屏通过动画旋转实现 视频铺满屏幕的问题

src/views/creation/index.module.less

@@ -527,7 +527,7 @@
   height: 20vh;
   display: flex;
   flex-direction: column;
-  justify-content: end;
+  justify-content: flex-end;
   .musicSheetName{
     width: 200px;
     margin: 0 auto 10px;
@@ -640,7 +640,7 @@
     .van-cell__value{
       display: flex;
       align-items: center;
-      justify-content: end;
+      justify-content: flex-end;
     }
   }
   .playImg{

src/views/creation/playCreation/index.module.less

@@ -4,7 +4,7 @@
   position: relative;
   overflow: hidden;
   &.landscapeScreen{
-    width: 100vh;
+    width: var(--creationHeight, 100vh);
     height: 100vw;
     position: absolute;
     top: 50%;
@@ -16,7 +16,7 @@
         pointer-events: none;
       }
       .osmdLoadingPop{
-        width: 100vh !important;
+        width: var(--creationHeight, 100vh) !important;
         height: 100vw !important;
         min-height: 100vw !important;
       }
@@ -34,6 +34,9 @@
           width: 100%;
           height: 100%;
           z-index: initial;
+          .plyr__video-wrapper{
+            z-index: -1;  // 旋转之后 视频video跑到最上层了，在video容器上改变图层位置信息
+          }
           .plyr__controls{
               background: initial;
               padding: 0 20px 20px;
@@ -180,7 +183,7 @@
       height: 32px;
     }
     .musicDetail{
-      margin-left: 10px;
+      margin-left: 20px;
       .musicSheetName{
         width: 300px;
         margin-top: 4px;

src/views/creation/playCreation/index.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
     const loaded = ref(false)
     let isInitAudioVisualDraw = false
     const { registerDrag, unRegisterDrag } = landscapeScreenDrag()
+    const creationHeight = ref(0)
     watch(landscapeScreen, ()=>{
       if(landscapeScreen.value){
         registerDrag()
@@ -296,7 +297,9 @@ export default defineComponent({
       }else{
         // web端使用旋转的方式
         updateLandscapeScreenState()
+        setFullHeight()
         window.addEventListener('resize', updateLandscapeScreenState)
+        window.addEventListener('resize', setFullHeight)
       }
     }
     function updateLandscapeScreenState(){
@@ -394,6 +397,12 @@ export default defineComponent({
         updateProgressStaff
       }
     }
+    function setFullHeight(){
+      // ios 浏览器100vh 不等于可视区
+      requestAnimationFrame(()=>{
+        creationHeight.value = window.innerHeight
+      })
+    }
     onMounted(()=>{
       // 五线谱
       initStaff()
@@ -410,11 +419,18 @@ export default defineComponent({
         });
       }else{
         window.removeEventListener('resize', updateLandscapeScreenState)
+        window.removeEventListener('resize', setFullHeight)
       }
       _plrl?.destroy()
     })
     return () =>
-    <div id="landscapeScreenPlay" class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]}
+    <div id="landscapeScreenPlay"
+      class={[styles.playCreation,landscapeScreen.value && styles.landscapeScreen,!loaded.value && styles.notLoaded]}
+      style={
+        {
+          "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"
+        }
+      }
       onClick={
         (event)=>{
           staffState.isShow && handlerClickPlay(event)