diff --git a/README.md b/README.md index 3d28fde..46c37f1 100644 --- a/README.md +++ b/README.md @@ -777,6 +777,10 @@ Things I chose while building, with the reasoning: device, uses Chrome's deferred `beforeinstallprompt` for a one-tap install where available, and stays reachable from Settings. It is mounted in the root layout, so it can appear over any screen — including the key gate — without blocking the page underneath. +30. **Phones don't zoom, and mobile fields are 16px.** The viewport sets `maximum-scale=1` / + `user-scalable=no` for an app-like feel, and a mobile-only rule keeps every input and textarea at + 16px so iOS Safari's focus auto-zoom never fires (iOS ignores `user-scalable=no` for that). + Desktop keeps the designed 12–14px field sizes. 14. **`gpt-oss:120b` does all content work — but it cannot read images** (`this model does not support image input`), so `VISION_MODEL` has to stay a multimodal model (`gemma4:31b-cloud`). Text-only inputs — pasted text, PDFs with a text layer, DOCX/PPTX/ODT — never touch the vision diff --git a/app/globals.css b/app/globals.css index 7315bcb..97dd60b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -550,6 +550,18 @@ body { } } +/* Mobile form fields ----------------------------------------------------- */ +/* iOS Safari zooms the whole page when a focused field's text is under 16px + (it ignores user-scalable=no for that). Deliberately unlayered so it wins + over the per-component Tailwind sizes, and only on phone-sized screens. */ +@media (max-width: 639px) { + input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), + textarea, + select { + font-size: 16px; + } +} + /* Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, diff --git a/app/layout.tsx b/app/layout.tsx index 970bb6c..7705146 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -41,7 +41,11 @@ export const metadata: Metadata = { export const viewport: Viewport = { width: "device-width", initialScale: 1, - maximumScale: 5, + // Phones: no pinch/double-tap zoom (the app-like feel). The input font-size + // rule in globals.css is what actually stops iOS Safari's focus auto-zoom, + // which ignores user-scalable=no. + maximumScale: 1, + userScalable: false, viewportFit: "cover", themeColor: [ { media: "(prefers-color-scheme: light)", color: "#f8fafc" },