From aa1d9b585cad9b4d4d35c8722b906b3e4d3d1cdf Mon Sep 17 00:00:00 2001 From: openclaw Date: Sun, 16 Aug 2026 00:51:21 +0800 Subject: [PATCH] fix: prevent iOS horizontal overflow --- apps/web/index.html | 2 +- apps/web/src/styles.css | 9 ++++++-- tests/e2e/08-兼容性/01-iOS视口.spec.ts | 29 ++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 tests/e2e/08-兼容性/01-iOS视口.spec.ts diff --git a/apps/web/index.html b/apps/web/index.html index 845a846..22c662d 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -2,7 +2,7 @@ - + diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index 557db91..b4c3d07 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -6,6 +6,8 @@ font-synthesis: none; line-height: 1.5; text-rendering: optimizeLegibility; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; } * { @@ -43,17 +45,20 @@ html, body, #app { - min-width: 320px; width: 100%; + max-width: 100%; height: 100%; min-height: 100%; margin: 0; - overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; } body { position: fixed; inset: 0; + width: 100%; + max-width: 100%; min-height: 0; overscroll-behavior: none; } diff --git a/tests/e2e/08-兼容性/01-iOS视口.spec.ts b/tests/e2e/08-兼容性/01-iOS视口.spec.ts new file mode 100644 index 0000000..3f7dd01 --- /dev/null +++ b/tests/e2e/08-兼容性/01-iOS视口.spec.ts @@ -0,0 +1,29 @@ +import { test, expect, devices } from "@playwright/test"; +import { makeEntry, mockApi, 登录 } from "../测试夹具"; + +async function expectNoHorizontalOverflow(page: import("@playwright/test").Page) { + await expect.poll(async () => page.evaluate(() => + Math.max(document.documentElement.scrollWidth, document.body.scrollWidth) - window.innerWidth, + )).toBeLessThanOrEqual(0); +} + +test.describe("iOS 视口兼容性", () => { + test("01-iPhone 窄视口的主要页面不产生横向滚动", async ({ browser }) => { + const context = await browser.newContext({ ...devices["iPhone SE"] }); + const page = await context.newPage(); + await mockApi(page, { initialEntries: [makeEntry()] }); + await 登录(page); + + for (const path of ["/", "/stats", "/ledgers", "/entries/entry-lunch"]) { + await page.goto(path); + await expect(page.locator(".app-shell")).toBeVisible(); + await expectNoHorizontalOverflow(page); + } + + await page.goto("/"); + await page.getByRole("button", { name: "记一笔" }).click(); + await expect(page.getByRole("region", { name: "快速记账" })).toBeVisible(); + await expectNoHorizontalOverflow(page); + await context.close(); + }); +});