boban
/
clusev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): stop iOS zoom-on-focus by forcing 16px inputs on touch devices 

iOS Safari zooms the viewport when a focused form control's font-size is < 16px.
The dense design uses text-xs/sm/[11px] on inputs, which triggered the zoom on
every input across the app. Add one unlayered media query forcing 16px on
input/textarea/select for touch-primary devices (@media (pointer: coarse)) —
covering phones AND tablets of any size (incl. 1024/1366px iPad Pro that a
width cap would miss) while keeping the small desktop sizing for mouse pointers.
Unlayered so it wins over Tailwind's utility classes.

Verified via touch emulation: inputs render 16px on phone/iPad/iPad-Pro widths
(matchMedia(pointer:coarse)=true) and stay 14px on mouse desktops at any width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat/v1-foundation
boban 2026-06-14 14:20:36 +02:00
parent cc00aa7d87
commit dfe141b406
1 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/css/app.css
View File

@ -161,3 +161,19 @@
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
} }
/* ── Touch devices: no zoom-on-focus ──────────────────────────────────────
iOS Safari zooms the viewport when a focused form control's font-size is
< 16px. The dense design uses text-xs/sm/[11px] on inputs, which triggers it.
Target by POINTER, not width: `pointer: coarse` matches touch-primary devices
(phones + tablets of ANY size — incl. a 1024px/1366px iPad Pro that a width cap
would miss) and excludes mouse desktops, so the small desktop sizing is kept.
UNLAYERED on purpose — it must win over Tailwind's utility layer (the text-*
classes in the markup). Excludes controls whose font-size cannot trigger zoom. */
@media (pointer: coarse) {
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
textarea,
select {
font-size: 16px;
}
}