Stop the phone zooming in on focus and double-tap

iOS zooms the whole page when you focus a control whose text is under
16px -- and it ignores user-scalable=no, so the font size is the only
lever that actually stops it. The search field (and the settings inputs
and selects) were 14px. They now render at 16px on touch devices only;
the coarse-pointer padding already in that block keeps them the same
physical size, and mouse users keep the 14px look.

body also gets touch-action: manipulation, which drops double-tap-to-zoom
-- the app handles its own taps, and the player/feed set touch-action:
none for their gestures regardless -- plus text-size-adjust: 100% so
Safari stops inflating text on its own after a rotation. Deliberate
pinch-zoom still works; taking that away would hurt anyone who needs it.

Checked in headless Chrome with touch emulation: every input, textarea
and select reports >=16px on a phone, desktop still reports 14px, body
touch-action is manipulation, and the player keeps touch-action: none.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
This commit is contained in:
Simon
2026-09-05 15:26:21 +00:00
parent a9893068cd
commit 0f30480af4

View File

@@ -41,6 +41,13 @@ body {
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
/* No accidental zoom: `manipulation` drops double-tap-to-zoom (the app's own
taps are handled in JS anyway) while leaving panning and deliberate
pinch-zoom alone, and text-size-adjust stops Safari inflating text of its
own accord after a rotation. */
touch-action: manipulation;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
} }
body.drawer-open { body.drawer-open {
@@ -932,6 +939,26 @@ body.theme-light .setting-item select option {
.input-row input { .input-row input {
padding: 10px 14px; padding: 10px 14px;
} }
/* iOS zooms the whole page when you focus a control whose text is under
16px, and it ignores user-scalable=no -- so the font size is the only
lever that actually stops it. Every text control gets 16px on touch
devices; the padding above keeps them looking the same size. */
.search-container input,
.input-row input,
.setting-item select,
.cmdk-input,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input:not([type]),
textarea,
select {
font-size: 16px;
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {