qak2019
/
cents
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: prevent iOS horizontal overflow

This commit is contained in:
openclaw 2026-08-16 00:51:21 +08:00
parent 0c5c6040bc
commit aa1d9b585c
3 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/index.html
View File

@ -2,7 +2,7 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <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, viewport-fit=cover" />
<meta name="theme-color" content="#43c9bd" /> <meta name="theme-color" content="#43c9bd" />
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" /> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />

9
apps/web/src/styles.css
View File

@ -6,6 +6,8 @@
font-synthesis: none; font-synthesis: none;
line-height: 1.5; line-height: 1.5;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
} }
* { * {
@ -43,17 +45,20 @@
html, html,
body, body,
#app { #app {
min-width: 320px;
width: 100%; width: 100%;
max-width: 100%;
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
margin: 0; margin: 0;
overflow: hidden; overflow-x: hidden;
overflow-y: hidden;
} }
body { body {
position: fixed; position: fixed;
inset: 0; inset: 0;
width: 100%;
max-width: 100%;
min-height: 0; min-height: 0;
overscroll-behavior: none; overscroll-behavior: none;
} }

29
tests/e2e/08-兼容性/01-iOS视口.spec.ts Normal file
View File

@ -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();
});
});