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:
@@ -41,6 +41,13 @@ body {
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
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 {
|
||||
@@ -932,6 +939,26 @@ body.theme-light .setting-item select option {
|
||||
.input-row input {
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user