feat(webui): polish iOS PWA presentation

- Disable pinch/double-tap zoom via the viewport meta (system-level
  accessibility zoom is unaffected).
- Add viewport-fit=cover so standalone mode renders edge-to-edge; the
  layout already uses env(safe-area-inset-*) from #4693.
- Add apple-mobile-web-app-* metas for standalone launch, status bar, and
  home screen label on iOS.
- Prevent double-tap zoom and orientation text inflation via inline CSS.
This commit is contained in:
moran
2026-08-11 20:59:06 +08:00
committed by chengyongru
parent 95287f7435
commit c0e8b8afff
+16 -1
View File
@@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<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.0, viewport-fit=cover, maximum-scale=1, user-scalable=no"
/>
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<meta <meta
name="description" name="description"
@@ -11,6 +14,10 @@
/> />
<meta name="theme-color" content="#fafaf9" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#fafaf9" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#161618" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" content="#161618" media="(prefers-color-scheme: dark)" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="nanobot" />
<link rel="icon" type="image/svg+xml" href="/brand/nanobot_mark.svg" /> <link rel="icon" type="image/svg+xml" href="/brand/nanobot_mark.svg" />
<link rel="alternate icon" type="image/png" sizes="32x32" href="/brand/nanobot_favicon_32.png" /> <link rel="alternate icon" type="image/png" sizes="32x32" href="/brand/nanobot_favicon_32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/brand/nanobot_apple_touch.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/brand/nanobot_apple_touch.png" />
@@ -22,6 +29,14 @@
height: 100%; height: 100%;
} }
/* App-like feel on touch devices: no double-tap zoom on interactive
elements (system-level accessibility zoom still works), and no text
size inflation on orientation change. */
html {
-webkit-text-size-adjust: 100%;
touch-action: manipulation;
}
body { body {
margin: 0; margin: 0;
background: #ffffff; background: #ffffff;