💄 修复安卓端界面适配：动态视口高度 + 窄屏表格/设置行/日志统计条重排 (#1636)

RenjiYuusei · claude · CodFrm · web-flow · commit 5aa0f25ed2a7 · 2026-08-05T15:36:05.000+08:00
* 💄 修复安卓端界面适配：动态视口高度 + 窄屏表格/设置行重排 安卓浏览器（Firefox / Edge / Kiwi 等）上： - 整页外壳用 100vh，而 vh 取「大视口」，显示地址栏时外壳比可见区域高， 且外壳内部滚动导致文档本身不可滚动，底部 Tab 栏/操作栏落在可视区外无法触达； 软键盘默认只压缩可视视口，编辑器底部工具栏与输入框被键盘遮挡。 改为 h-dvh / min-h-dvh，并在整页入口声明 interactive-widget=resizes-content。 - 编辑器「储存 / 资源」子视图是桌面表格：工具栏单行溢出（清空按钮被裁切）、 固定列宽让表头文案在窄屏重叠。移动端改为竖排卡片行 + 换行工具栏， 桌面端用 md:contents 保持原有列对齐。 - 设置 / 工具页的 SettingRow 横排 + 固定宽控件，把文案挤成每行一两个词； 移动端改为竖排。脚本设置子视图的固定宽控件补 max-w-full 避免越界。 close #1555 Co-authored-by: RenjiYuusei <daoluc.yy@gmail.com> * 💄 修复日志页统计条窄屏文字重叠 日志页「范围 / 统计条」在窄屏（移动端）下，统计文字会压到右侧「自动清理超过 N 天 的日志」上。原因是该条为单行 flex justify-between：左侧分组带 min-w-0 会被压缩， 但其中的计数 span 是 shrink-0，被压缩后内容溢出自身盒子并直接画到右侧分组上—— 是溢出，而不是换行或截断，所以两段文字叠在一起。 改为窄屏竖向堆叠（md 以上仍是原来的单行左右分布）：两个分组各 w-full 独占一行， 长文本才能在行内截断；「自动清理」分组允许换行，避免超窄屏横向溢出。同时给 「当前 / 实时」两个徽标补 shrink-0 whitespace-nowrap，避免被挤成两行折字；统计 分隔符从全角「，」改为「 ·」，与顶栏一致，在非中文语言下更易读。 真实构建下用 Playwright 复现与验证（vi-VN，400px 宽）：修复前两段文字 X 轴重叠 57.6px、Y 轴完全重叠；修复后 400/360/1280 宽在浅色与深色主题下均无重叠、无横向 溢出，桌面端布局不变。 Co-authored-by: RenjiYuusei <daoluc.yy@gmail.com> * 💄 修复日志页统计条在窄桌面宽度下仍压字 上一版只把窄屏(<768px)改成竖向堆叠,≥768px 仍是单行 flex justify-between, 因此手机横屏、平板、以及浏览器「请求桌面版网站」(980px 布局视口)这类宽度只要 内容放不下,统计文字仍会溢出压到「自动清理超过 N 天的日志」上。 实测 vi-VN + 开启自动刷新(多出「实时 · 5 秒」徽标)时,768px 宽下 「Tổng 2 · Đã lọc 2」与「Tự động xóa nhật ký cũ hơn」重叠 30.2px。根因与窄屏 同一个:统计文字是 shrink-0,单行装不下时压缩只能发生在别处并溢出。 给统计条补 md:flex-wrap(配合 md:gap-x-2 md:gap-y-1 md:py-1),放不下时让自动 清理分组整行下移;宽度足够时(1280px)仍是原来的单行左右分布,未回归。 验证:vi-VN 下 320/360/388/412/480/600/767 及 768/820/900/980/1024 宽逐一测量 两分组全部子元素两两包围盒,无任何重叠、无横向溢出(docScrollWidth == clientWidth)。 Co-authored-by: RenjiYuusei <daoluc.yy@gmail.com> * 💄 外部接入确认页跟进移动端视口适配 #1573 新增的 external_access_confirm 页在本 PR 分支之后合入，未跟上 #1555 的 动态视口处理：声明 interactive-widget=resizes-content 并把外壳换成 min-h-dvh。 --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: 王一之 <yz@ggnb.top>
diff --git a/docs/references/design-patterns.md b/docs/references/design-patterns.md
@@ -19,6 +19,20 @@ function Page() {
 }
 ```
 
+### Viewport height & on-screen keyboard
+
+Page shells are height-locked to the viewport (`TopBar + scroll container + ActionBar`), so they must use the
+**dynamic** viewport units — `h-dvh` / `min-h-dvh`, never `h-screen` / `100vh`. `vh` resolves against the
+*large* viewport (browser UI retracted), so on Android — Firefox, Edge, Kiwi alike — a `100vh` shell is taller
+than the visible area while the toolbar is showing, and because the shell scrolls internally the document
+itself can't scroll, leaving `BottomTabBar` / ActionBar unreachable below the fold (issue #1555).
+
+The full-page entries (`options` / `install` / `import` / `batchupdate` / `confirm`) additionally declare
+`interactive-widget=resizes-content` in their `<meta name="viewport">`: the default `resizes-visual` shrinks
+only the visual viewport when the on-screen keyboard opens, leaving a `dvh` shell (and the editor toolbar under
+it) hidden behind the keyboard. `resizes-content` shrinks the layout viewport instead, so the shell reflows
+above the keyboard. `popup.html` is excluded — it is a fixed-size panel that scrolls as a whole.
+
 ### Desktop ↔ mobile transforms
 
 | Desktop (≥768px) | Mobile (<768px) |
diff --git a/src/pages/batchupdate.html b/src/pages/batchupdate.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <script src="common.js"></script>
     <title>ScriptCat</title>
     <style>
diff --git a/src/pages/batchupdate/components.tsx b/src/pages/batchupdate/components.tsx
@@ -444,7 +444,7 @@ export function DesktopView({ view }: { view: BatchUpdateViewProps }) {
   const { t } = useTranslation();
   const empty = view.updates.length === 0 && view.ignored.length === 0;
   return (
-    <div className="flex h-screen flex-col bg-background text-foreground">
+    <div className="flex h-dvh flex-col bg-background text-foreground">
       <header className="flex h-[60px] shrink-0 items-center justify-between border-b border-border bg-card px-6">
         <div className="flex min-w-0 items-center gap-3">
           <PackageCheck className="size-[22px] shrink-0 text-primary" />
diff --git a/src/pages/batchupdate/mobile.tsx b/src/pages/batchupdate/mobile.tsx
@@ -188,7 +188,7 @@ export function MobileView({ view }: { view: BatchUpdateViewProps }) {
         .join(" · ");
 
   return (
-    <div className="flex h-screen flex-col bg-background text-foreground">
+    <div className="flex h-dvh flex-col bg-background text-foreground">
       <header className="flex h-[62px] shrink-0 items-center gap-3 border-b border-border bg-card px-4">
         <PackageCheck className="size-[22px] shrink-0 text-primary" />
         <div className="flex min-w-0 flex-col">
diff --git a/src/pages/confirm.html b/src/pages/confirm.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <script src="common.js"></script>
     <title>ScriptCat</title>
     <style>
diff --git a/src/pages/confirm/App.tsx b/src/pages/confirm/App.tsx
@@ -54,7 +54,7 @@ function PageShell({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-testid="confirm-shell"
-      className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background px-4 py-10"
+      className="flex min-h-dvh flex-col items-center justify-center gap-6 bg-background px-4 py-10"
     >
       <BrandMark />
       {children}
diff --git a/src/pages/external_access_confirm.html b/src/pages/external_access_confirm.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <script src="common.js"></script>
     <title>ScriptCat</title>
     <style>
diff --git a/src/pages/external_access_confirm/App.test.tsx b/src/pages/external_access_confirm/App.test.tsx
@@ -146,6 +146,16 @@ describe("外部接入 · 操作确认页（三档决策）", () => {
     );
   });
 
+  // 100vh 是「大视口」，安卓上软键盘/可收起工具栏出现时外壳仍按最大高度撑开，
+  // 确认按钮被挤出可视区（issue #1555）；动态视口单位才跟随可见高度。
+  it("外壳高度使用动态视口单位而非 100vh", async () => {
+    getOperation.mockResolvedValue(baseOp({ kind: "enable" }));
+    render(<ExternalAccessConfirmView operationId="op-1" />);
+    const shell = await screen.findByTestId("external-access-confirm-shell");
+    expect(shell.className).toContain("min-h-dvh");
+    expect(shell.className).not.toContain("min-h-screen");
+  });
+
   it("提交失败时保留确认页、显示错误并允许重试", async () => {
     decideOperation.mockRejectedValueOnce(new Error("temporary failure")).mockResolvedValueOnce(undefined);
     getOperation.mockResolvedValue(baseOp({ kind: "enable" }));
diff --git a/src/pages/external_access_confirm/App.tsx b/src/pages/external_access_confirm/App.tsx
@@ -26,7 +26,7 @@ function BrandMark() {
 function PageShell({ topRight, children }: { topRight?: React.ReactNode; children: React.ReactNode }) {
   const { t } = useTranslation("external_access");
   return (
-    <div data-testid="external-access-confirm-shell" className="flex min-h-screen flex-col bg-muted">
+    <div data-testid="external-access-confirm-shell" className="flex min-h-dvh flex-col bg-muted">
       {/* 顶栏:品牌 + 「外部接入 · 操作确认」面包屑 + 右侧 TTL 倒计时(设计稿 Th6Hv) */}
       <header className="flex items-center justify-between gap-3 border-b bg-card px-6 py-3">
         <div className="flex min-w-0 items-center gap-2.5">
diff --git a/src/pages/import.html b/src/pages/import.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <script src="common.js"></script>
     <title>ScriptCat</title>
     <style>
diff --git a/src/pages/import/components.tsx b/src/pages/import/components.tsx
@@ -188,7 +188,7 @@ export function ImportLayout({
   children: ReactNode;
 }) {
   return (
-    <div data-testid="import-layout" className="flex h-screen flex-col bg-background text-foreground">
+    <div data-testid="import-layout" className="flex h-dvh flex-col bg-background text-foreground">
       <header
         data-testid="top-bar"
         className="sticky top-0 z-10 flex h-[52px] shrink-0 items-center gap-3 border-b border-border bg-card/95 px-6 backdrop-blur"
diff --git a/src/pages/import/mobile.tsx b/src/pages/import/mobile.tsx
@@ -57,7 +57,7 @@ function MobileHeader({ onClose }: { onClose?: () => void }) {
 /** 移动端状态屏外壳:头部 + 居中正文(复用桌面的居中状态组件) */
 function MobileStateShell({ onClose, children }: { onClose?: () => void; children: ReactNode }) {
   return (
-    <div className="flex h-screen flex-col bg-background text-foreground">
+    <div className="flex h-dvh flex-col bg-background text-foreground">
       <MobileHeader onClose={onClose} />
       <div className="flex flex-1 items-center justify-center overflow-auto px-5">{children}</div>
     </div>
@@ -367,7 +367,7 @@ export function MobileView({ view }: { view: ImportView }) {
 
   const importing = view.phase === "importing";
   return (
-    <div className="flex h-screen flex-col bg-background text-foreground">
+    <div className="flex h-dvh flex-col bg-background text-foreground">
       <MobileHeader onClose={importing ? undefined : view.onClose} />
       {importing && <TopProgressBar done={view.doneCount} total={view.totalCount} />}
       {importing ? <MobileImportingBar view={view} /> : <MobileToolbar view={view} />}
diff --git a/src/pages/install.html b/src/pages/install.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <script src="common.js"></script>
     <title>ScriptCat</title>
     <style>
diff --git a/src/pages/install/components/InstallLayout.tsx b/src/pages/install/components/InstallLayout.tsx
@@ -15,7 +15,7 @@ export interface InstallLayoutProps {
 
 export function InstallLayout({ title, titleIcon, titleTone = "default", actions, children }: InstallLayoutProps) {
   return (
-    <div data-testid="install-layout" className="flex h-screen flex-col bg-background">
+    <div data-testid="install-layout" className="flex h-dvh flex-col bg-background">
       <InstallTopBar title={title} titleIcon={titleIcon} titleTone={titleTone} />
 
       <main data-testid="content-area" className="min-h-0 flex-1 overflow-y-auto px-6 py-7">
diff --git a/src/pages/install/components/InstallStates.tsx b/src/pages/install/components/InstallStates.tsx
@@ -9,7 +9,7 @@ import { InstallTopBar } from "./InstallTopBar";
 function StateShell({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation(["install", "common"]);
   return (
-    <div className="flex h-screen flex-col bg-background">
+    <div className="flex h-dvh flex-col bg-background">
       <InstallTopBar title={t("install:context_install")} titleIcon={Download} />
       <main className="flex min-h-0 flex-1 flex-col items-center justify-center gap-5 px-6 text-center">
         {children}
diff --git a/src/pages/options.html b/src/pages/options.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
     <script src="common.js"></script>
     <title>ScriptCat</title>
   </head>
diff --git a/src/pages/options/App.test.tsx b/src/pages/options/App.test.tsx
@@ -67,4 +67,17 @@ describe("Layout 外壳响应式", () => {
     expect(container.querySelector("aside")).not.toBeNull();
     expect(queryByTestId("bottom-tab-bar")).toBeNull();
   });
+
+  // 100vh 在带可收起工具栏/软键盘的移动浏览器上等于「大视口」，外壳会比当前可见区域更高，
+  // 底部 Tab 栏被挤到可视区外且文档本身不可滚动（issue #1555）；动态视口单位才跟随可见高度。
+  it.each([
+    ["移动端", true],
+    ["桌面端", false],
+  ])("%s 外壳高度使用动态视口单位而非 100vh", (_label, isMobile) => {
+    mockedUseIsMobile.mockReturnValue(isMobile);
+    const { container } = renderLayout();
+    const shell = container.querySelector("div")!;
+    expect(shell.className).toContain("h-dvh");
+    expect(shell.className).not.toContain("h-screen");
+  });
 });
diff --git a/src/pages/options/App.tsx b/src/pages/options/App.tsx
@@ -32,13 +32,13 @@ export function Layout() {
   if (isMobile) {
     if (isFullscreen) {
       return (
-        <div className="flex flex-col h-screen bg-background text-foreground">
+        <div className="flex flex-col h-dvh bg-background text-foreground">
           <Outlet />
         </div>
       );
     }
     return (
-      <div className="flex flex-col h-screen bg-background text-foreground">
+      <div className="flex flex-col h-dvh bg-background text-foreground">
         <MobileHeader />
         <main className="flex-1 min-w-0 overflow-auto scrollbar-custom">
           <Outlet />
@@ -50,7 +50,7 @@ export function Layout() {
   }
   return (
     <>
-      <div className="flex h-screen bg-background text-foreground">
+      <div className="flex h-dvh bg-background text-foreground">
         <Sidebar />
         <main className="flex-1 min-w-0 overflow-auto scrollbar-custom">
           <Outlet />
diff --git a/src/pages/options/components/SettingRow.tsx b/src/pages/options/components/SettingRow.tsx
@@ -13,15 +13,16 @@ export function SettingRow({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center justify-between gap-4">
+    // 移动端(<768px)竖排：控件宽度固定，横排会把文案挤成每行一两个字（issue #1555）
+    <div className="flex flex-col items-stretch gap-2 md:flex-row md:items-center md:justify-between md:gap-4">
       <div className="flex min-w-0 items-center gap-2.5">
         {icon && <span className="shrink-0 text-muted-foreground">{icon}</span>}
         <div className="flex flex-col gap-0.5 min-w-0">
           <span className="text-[13px] font-medium text-foreground">{label}</span>
           {description && <span className="text-xs text-muted-foreground">{description}</span>}
         </div>
       </div>
-      <div className="flex items-center gap-2 shrink-0">{children}</div>
+      <div className="flex items-center gap-2 md:shrink-0">{children}</div>
     </div>
   );
 }
diff --git a/src/pages/options/layout/Sidebar.tsx b/src/pages/options/layout/Sidebar.tsx
@@ -71,7 +71,7 @@ export default function Sidebar() {
 
   return (
     <aside
-      className={`flex flex-col h-screen bg-sidebar border-r border-sidebar-border transition-[width] duration-200 ${collapsed ? "w-14" : "w-[200px]"}`}
+      className={`flex flex-col h-dvh bg-sidebar border-r border-sidebar-border transition-[width] duration-200 ${collapsed ? "w-14" : "w-[200px]"}`}
     >
       {/* Logo（点击回到首页） */}
       <NavLink
diff --git a/src/pages/options/routes/Logger/LoggerMobile.test.tsx b/src/pages/options/routes/Logger/LoggerMobile.test.tsx
@@ -84,6 +84,15 @@ describe("日志页面 - 移动端", () => {
     expect(msg.className).not.toContain("truncate");
   });
 
+  it("移动端范围/统计条竖向堆叠，统计与自动清理各自独占整行", () => {
+    renderPage();
+    const bar = screen.getByTestId("logger-stats-bar");
+    expect(bar.className).toContain("flex-col");
+    // 两组必须撑满整行:否则长文本会溢出自身盒子压到相邻分组上(窄屏文字重叠)
+    expect(screen.getByTestId("logger-stats-summary").className).toContain("w-full");
+    expect(screen.getByTestId("logger-clean-schedule").className).toContain("w-full");
+  });
+
   it("仍渲染全部日志且筛选交互可用", () => {
     renderPage();
     expect(screen.getByText("retry timeout reached")).toBeTruthy();
diff --git a/src/pages/options/routes/Logger/index.test.tsx b/src/pages/options/routes/Logger/index.test.tsx
@@ -85,6 +85,14 @@ describe("日志页面", () => {
     expect(screen.getByTestId("log-detail-1")).toBeTruthy();
   });
 
+  it("范围/统计条允许换行，窄桌面宽度下自动清理设置整行下移而非被统计文字压字", () => {
+    renderPage();
+    const bar = screen.getByTestId("logger-stats-bar");
+    // 统计文字是 shrink-0,单行放不下时必然溢出压到相邻分组上(768~900px 带「实时」徽标即命中),
+    // 允许换行才能让自动清理分组整行下移
+    expect(bar.className).toContain("md:flex-wrap");
+  });
+
   it("点击清空日志先弹出确认，确认前不调用 clearLogs", async () => {
     renderPage();
     expect(mockLoggerData.clearLogs).not.toHaveBeenCalled();
diff --git a/src/pages/options/routes/Logger/index.tsx b/src/pages/options/routes/Logger/index.tsx
@@ -216,28 +216,37 @@ export default function Logger() {
       </div>
 
       {/* 范围 / 统计条 */}
-      <div className="flex items-center justify-between gap-2 min-h-[34px] px-4 py-1 md:py-0 shrink-0 border-b border-border bg-muted/40 text-xs">
-        <div className="flex items-center gap-2 min-w-0 text-fg-secondary">
+      <div
+        data-testid="logger-stats-bar"
+        className="flex flex-col gap-1 min-h-[34px] px-4 py-1.5 shrink-0 border-b border-border bg-muted/40 text-xs md:flex-row md:flex-wrap md:items-center md:justify-between md:gap-x-2 md:gap-y-1 md:py-1"
+      >
+        <div
+          data-testid="logger-stats-summary"
+          className="flex w-full items-center gap-2 min-w-0 text-fg-secondary md:w-auto"
+        >
           <span className="truncate font-mono">
             {`${formatUnixTime(range.start / 1000)} → ${formatUnixTime(range.end / 1000)}`}
           </span>
           {isNow && (
-            <span className="rounded-full bg-primary-light px-1.5 py-0.5 text-[11px] font-medium text-primary">
+            <span className="shrink-0 whitespace-nowrap rounded-full bg-primary-light px-1.5 py-0.5 text-[11px] font-medium text-primary">
               {t("logs:now")}
             </span>
           )}
           {refreshInterval !== "off" && (
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-success-bg px-1.5 py-0.5 text-[11px] font-medium text-success-fg">
+            <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-success-bg px-1.5 py-0.5 text-[11px] font-medium text-success-fg">
               <span className="h-1.5 w-1.5 rounded-full bg-success" />
               {`${t("logs:live")} · ${getIntervalLabel(refreshInterval, t)}`}
             </span>
           )}
           <span className="text-muted-foreground">{"·"}</span>
           <span className="shrink-0">
-            {`${t("logs:total_count", { count: logs.length })}，${t("logs:filtered_count", { count: filtered.length })}`}
+            {`${t("logs:total_count", { count: logs.length })} · ${t("logs:filtered_count", { count: filtered.length })}`}
           </span>
         </div>
-        <div className="flex items-center gap-1.5 shrink-0 text-muted-foreground">
+        <div
+          data-testid="logger-clean-schedule"
+          className="flex w-full flex-wrap items-center gap-1.5 text-muted-foreground md:w-auto md:flex-nowrap md:shrink-0"
+        >
           <span>{t("logs:clean_schedule")}</span>
           <input
             type="number"
diff --git a/src/pages/options/routes/ScriptEditor/tabs/ResourcePane.tsx b/src/pages/options/routes/ScriptEditor/tabs/ResourcePane.tsx
diff --git a/src/pages/options/routes/ScriptEditor/tabs/SettingsPane.tsx b/src/pages/options/routes/ScriptEditor/tabs/SettingsPane.tsx
diff --git a/src/pages/options/routes/ScriptEditor/tabs/StoragePane.tsx b/src/pages/options/routes/ScriptEditor/tabs/StoragePane.tsx
diff --git a/src/pages/viewport-meta.test.ts b/src/pages/viewport-meta.test.ts

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ function PageShell({ children }: { children: React.ReactNode }) {`
`54`	`54`	`return (`
`55`	`55`	`<div`
`56`	`56`	`data-testid="confirm-shell"`
`57`		`- className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background px-4 py-10"`
	`57`	`+ className="flex min-h-dvh flex-col items-center justify-center gap-6 bg-background px-4 py-10"`
`58`	`58`	`>`
`59`	`59`	`<BrandMark />`
`60`	`60`	`{children}`