UI6 修复 iPhone11 企业微信移动导航

client/src/layouts/AppShellLayout.tsx

@@ -23,19 +23,23 @@ export function AppShellLayout() {
     }
 
     const updateViewportHeight = () => {
-      const height = window.visualViewport?.height ?? window.innerHeight;
+      const height = Math.max(320, Math.floor(window.visualViewport?.height ?? window.innerHeight));
       document.documentElement.style.setProperty("--mobile-viewport-height", `${height}px`);
     };
 
     updateViewportHeight();
+    const frameId = window.requestAnimationFrame(updateViewportHeight);
     window.addEventListener("resize", updateViewportHeight);
     window.addEventListener("orientationchange", updateViewportHeight);
     window.visualViewport?.addEventListener("resize", updateViewportHeight);
+    window.visualViewport?.addEventListener("scroll", updateViewportHeight);
 
     return () => {
+      window.cancelAnimationFrame(frameId);
       window.removeEventListener("resize", updateViewportHeight);
       window.removeEventListener("orientationchange", updateViewportHeight);
       window.visualViewport?.removeEventListener("resize", updateViewportHeight);
+      window.visualViewport?.removeEventListener("scroll", updateViewportHeight);
     };
   }, [isMobileRoute]);
 
@@ -57,11 +61,11 @@ export function AppShellLayout() {
 
       <main
         className={`flex min-w-0 flex-1 flex-col ${isMobileRoute ? "overflow-hidden" : "lg:ml-72"}`}
-        style={isMobileRoute ? { height: "var(--mobile-viewport-height, 100vh)", minHeight: "var(--mobile-viewport-height, 100vh)" } : undefined}
+        style={isMobileRoute ? { height: "var(--mobile-viewport-height, 100vh)", maxHeight: "var(--mobile-viewport-height, 100vh)", minHeight: "var(--mobile-viewport-height, 100vh)" } : undefined}
       >
         {isMobileRoute ? null : <Topbar />}
 
-        <div className={`flex-1 px-4 py-5 ${isMobileRoute ? `min-h-0 overflow-y-auto pt-4 sm:px-5 sm:pt-5 ${showMobileBottomNav ? "pb-[calc(var(--mobile-bottom-nav-height,64px)+env(safe-area-inset-bottom,0px)+1rem)]" : "pb-5 sm:pb-6"}` : "sm:px-7 sm:py-7 lg:px-8"}`}>
+        <div className={`flex-1 px-4 py-5 ${isMobileRoute ? `min-h-0 overscroll-contain overflow-y-auto px-3 py-3 sm:px-5 sm:py-5 ${showMobileBottomNav ? "pb-[calc(var(--mobile-bottom-nav-height,64px)+env(safe-area-inset-bottom,0px)+1rem)]" : "pb-5 sm:pb-6"}` : "sm:px-7 sm:py-7 lg:px-8"}`}>
           <div className="layout-container max-w-none">
             <ErrorBoundary>
               <Outlet />