Fix narrow PWA layout on tablet with standalone width rules.

Allow any orientation in manifest, widen content and enable dual-column mode in installed apps on tablet viewports, with iOS display-mode fallback.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/globals.css

@@ -126,4 +126,34 @@
   .zen-card {
     @apply bg-card/85 backdrop-blur-sm;
   }
+
+  /* PWA 安装后：iPad 等平板视口常 <1024px，单独放宽宽度与双栏 */
+  @media (display-mode: standalone) and (min-width: 768px) and (max-width: 1919px) {
+    .site-content-shell {
+      max-width: 72rem;
+    }
+
+    .site-content-shell-narrow {
+      max-width: 64rem;
+    }
+
+    .mode-workspace-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+/* iOS PWA 兜底：部分系统不识别 display-mode 媒体查询 */
+@media (min-width: 768px) and (max-width: 1919px) {
+  html[data-display-mode="standalone"] .site-content-shell {
+    max-width: 72rem;
+  }
+
+  html[data-display-mode="standalone"] .site-content-shell-narrow {
+    max-width: 64rem;
+  }
+
+  html[data-display-mode="standalone"] .mode-workspace-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }

app/layout.tsx

@@ -3,6 +3,7 @@ import type { Metadata, Viewport } from "next";
 import React from "react";
 import Umami from "@/components/umami";
 import PwaProvider from "@/components/pwa/pwa-provider";
+import PwaDisplayMode from "@/components/pwa/pwa-display-mode";
 import { ThemeProvider } from "next-themes";
 
 export const metadata: Metadata = {
@@ -14,6 +15,10 @@ export const metadata: Metadata = {
     title: "知命阁",
     statusBarStyle: "default",
   },
+  other: {
+    "mobile-web-app-capable": "yes",
+    "apple-mobile-web-app-capable": "yes",
+  },
   manifest: "/manifest.webmanifest",
 };
 
@@ -49,6 +54,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           {children}
+          <PwaDisplayMode />
           <PwaProvider />
         </ThemeProvider>
         <Umami />

app/manifest.ts

@@ -8,7 +8,7 @@ export default function manifest(): MetadataRoute.Manifest {
       "融合周易智慧与人工智能 — 易经学习、六爻算卦、生辰八字、综合测算",
     start_url: "/",
     display: "standalone",
-    orientation: "portrait-primary",
+    orientation: "any",
     background_color: "#f5f5f4",
     theme_color: "#525252",
     lang: "zh-CN",