fix: view port problem

Author: MakinoharaShoko

packages/webgal/index.html

@@ -13,6 +13,13 @@
         background: black;
       }
 
+      html {
+        --ios-safe-area-top: env(safe-area-inset-top, 0px);
+        --ios-safe-area-right: env(safe-area-inset-right, 0px);
+        --ios-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+        --ios-safe-area-left: env(safe-area-inset-left, 0px);
+      }
+
       .html-body__effect-background {
         height: 100vh;
         width: 100vw;
@@ -134,15 +141,16 @@
 
       html.ios-phone-viewport,
       html.ios-phone-viewport body {
+        width: 100%;
+        height: 100%;
         overflow: hidden;
         overscroll-behavior: none;
         background: black;
       }
 
       html.ios-phone-viewport body {
-        width: 2560px;
-        height: 1440px;
-        position: relative;
+        position: fixed;
+        inset: 0;
       }
 
       html.ios-phone-viewport #ebg {
@@ -156,7 +164,6 @@
         position: absolute;
         top: 0;
         left: 0;
-        transform: none !important;
         transform-origin: top left;
       }
     </style>
@@ -201,6 +208,9 @@
         const titleEnter = document.querySelector('.html-body__title-enter');
         const effectBackground = document.querySelector('.html-body__effect-background');
         let viewportMeta = document.querySelector('meta[name="viewport"]');
+        let iosPhoneLayoutFrame = 0;
+        let touchStartX = 0;
+        let touchStartY = 0;
 
         window.__WEBGAL_DEVICE_INFO__ = { isIOS, isIOSPhone };
 
@@ -213,6 +223,152 @@
           return viewportMeta;
         };
 
+        const parseInset = (value) => {
+          const parsed = Number.parseFloat(value);
+          return Number.isFinite(parsed) ? parsed : 0;
+        };
+
+        const getSafeAreaInsets = () => {
+          const computedStyle = window.getComputedStyle(html);
+          return {
+            top: parseInset(computedStyle.getPropertyValue('--ios-safe-area-top')),
+            right: parseInset(computedStyle.getPropertyValue('--ios-safe-area-right')),
+            bottom: parseInset(computedStyle.getPropertyValue('--ios-safe-area-bottom')),
+            left: parseInset(computedStyle.getPropertyValue('--ios-safe-area-left')),
+          };
+        };
+
+        const applyIOSPhoneLayout = () => {
+          const safeArea = getSafeAreaInsets();
+          const viewportWidth = window.innerWidth;
+          const viewportHeight = window.innerHeight;
+          const usableWidth = Math.max(viewportWidth - safeArea.left - safeArea.right, 1);
+          const usableHeight = Math.max(viewportHeight - safeArea.top - safeArea.bottom, 1);
+          const scale = Math.max(Math.min(usableWidth / targetWidth, usableHeight / targetHeight), 0.01);
+          const left = safeArea.left + Math.max((usableWidth - targetWidth * scale) / 2, 0);
+          const top = safeArea.top + Math.max((usableHeight - targetHeight * scale) / 2, 0);
+          const transform = `translate(${left}px, ${top}px) scale(${scale})`;
+
+          if (effectBackground) {
+            effectBackground.style.transform = '';
+          }
+          for (const element of [root, titleEnter]) {
+            if (element) {
+              element.style.transform = transform;
+            }
+          }
+        };
+
+        const scheduleIOSPhoneLayout = () => {
+          if (iosPhoneLayoutFrame) {
+            window.cancelAnimationFrame(iosPhoneLayoutFrame);
+          }
+          iosPhoneLayoutFrame = window.requestAnimationFrame(() => {
+            iosPhoneLayoutFrame = 0;
+            applyIOSPhoneLayout();
+          });
+        };
+
+        const canScrollInDirection = (element, deltaX, deltaY) => {
+          const style = window.getComputedStyle(element);
+          const overflowY = style.overflowY;
+          const overflowX = style.overflowX;
+          const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight + 1;
+          const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth + 1;
+
+          if (Math.abs(deltaY) >= Math.abs(deltaX) && canScrollY) {
+            const maxScrollTop = element.scrollHeight - element.clientHeight;
+            if (deltaY > 0 && element.scrollTop > 0) return true;
+            if (deltaY < 0 && element.scrollTop < maxScrollTop) return true;
+          }
+
+          if (Math.abs(deltaX) > Math.abs(deltaY) && canScrollX) {
+            const maxScrollLeft = element.scrollWidth - element.clientWidth;
+            if (deltaX > 0 && element.scrollLeft > 0) return true;
+            if (deltaX < 0 && element.scrollLeft < maxScrollLeft) return true;
+          }
+
+          return false;
+        };
+
+        const findScrollableAncestor = (startElement, deltaX, deltaY) => {
+          let current = startElement;
+          while (current && current !== body) {
+            if (current instanceof HTMLElement && canScrollInDirection(current, deltaX, deltaY)) {
+              return current;
+            }
+            current = current.parentElement;
+          }
+          return null;
+        };
+
+        const installIOSPhoneGestureGuards = () => {
+          const blockEvent = (event) => {
+            event.preventDefault();
+          };
+
+          document.addEventListener(
+            'gesturestart',
+            (event) => {
+              blockEvent(event);
+            },
+            { passive: false },
+          );
+          document.addEventListener(
+            'gesturechange',
+            (event) => {
+              blockEvent(event);
+            },
+            { passive: false },
+          );
+          document.addEventListener(
+            'gestureend',
+            (event) => {
+              blockEvent(event);
+            },
+            { passive: false },
+          );
+
+          document.addEventListener(
+            'touchstart',
+            (event) => {
+              if (event.touches.length > 1) {
+                blockEvent(event);
+                return;
+              }
+              const touch = event.touches[0];
+              if (touch) {
+                touchStartX = touch.clientX;
+                touchStartY = touch.clientY;
+              }
+            },
+            { passive: false },
+          );
+
+          document.addEventListener(
+            'touchmove',
+            (event) => {
+              if (event.touches.length > 1) {
+                blockEvent(event);
+                return;
+              }
+              const touch = event.touches[0];
+              if (!touch) {
+                return;
+              }
+              const deltaX = touch.clientX - touchStartX;
+              const deltaY = touch.clientY - touchStartY;
+              const target = event.target instanceof Element ? event.target : null;
+              const scrollableAncestor = target ? findScrollableAncestor(target, deltaX, deltaY) : null;
+
+              if (!scrollableAncestor) {
+                blockEvent(event);
+              }
+            },
+            { passive: false },
+          );
+        };
+
         const resize = () => {
           const h = window.innerHeight; // 窗口高度
           const w = window.innerWidth; // 窗口宽度
@@ -293,17 +449,15 @@
           if (isIOSPhone) {
             html.classList.add('ios-phone-viewport');
             body.classList.add('ios-phone-viewport');
-            ensureViewportMeta().content = `width=${targetWidth}, height=${targetHeight}, user-scalable=no, viewport-fit=cover`;
-            if (effectBackground) {
-              effectBackground.style.transform = '';
-            }
-            for (const element of [root, titleEnter]) {
-              if (element) {
-                element.style.left = '0';
-                element.style.top = '0';
-                element.style.transform = 'none';
-              }
-            }
+            ensureViewportMeta().content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover';
+            installIOSPhoneGestureGuards();
+            scheduleIOSPhoneLayout();
+            window.addEventListener('load', scheduleIOSPhoneLayout);
+            window.addEventListener('resize', scheduleIOSPhoneLayout);
+            window.addEventListener('orientationchange', () => {
+              scheduleIOSPhoneLayout();
+              setTimeout(scheduleIOSPhoneLayout, 300);
+            });
           } else {
             ensureViewportMeta().content = 'width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1';
           }