Update fullscreen_playcanvas.js

fullscreen_playcanvas.js

@@ -62,9 +62,12 @@
       top: 0 !important;
       left: 0 !important;
       width: 100vw !important;
-      height: 100vh !important;
+      /* Fallback pour vieux navigateurs */
+      height: 100vh !important; 
+      /* iOS 16+ et navigateurs modernes : s'adapte aux barres dynamiques */
+      height: 100dvh !important; 
       max-width: 100vw !important;
-      max-height: 100vh !important;
+      max-height: 100dvh !important;
       padding-bottom: 0 !important;
       margin: 0 !important;
       z-index: 99999;
@@ -298,19 +301,23 @@
   });
 
   // ─── 16. Resize / orientation ────────────────────────────────────────────────
-  window.addEventListener('resize', function () {
-    if (isFullscreen) {
-      wrapper.style.width = '100vw';
-      wrapper.style.height = '100vh';
-    }
-  });
-
-  window.addEventListener('orientationchange', function () {
-    if (isFullscreen) {
-      setTimeout(function () {
+    window.addEventListener('resize', function () {
+      if (isFullscreen) {
         wrapper.style.width = '100vw';
-        wrapper.style.height = '100vh';
-      }, 200);
-    }
-  });
-})();
+        // Utilise dvh si disponible, sinon vh
+        const heightUnit = (isIOS && CSS.supports('height', '1dvh')) ? '100dvh' : '100vh';
+        wrapper.style.height = heightUnit;
+        wrapper.style.maxHeight = heightUnit;
+      }
+    });
+  
+    window.addEventListener('orientationchange', function () {
+      if (isFullscreen) {
+        setTimeout(function () {
+          wrapper.style.width = '100vw';
+          const heightUnit = (isIOS && CSS.supports('height', '1dvh')) ? '100dvh' : '100vh';
+          wrapper.style.height = heightUnit;
+          wrapper.style.maxHeight = heightUnit;
+        }, 200);
+      }
+    });