移动端表单体验差主因是CSS未覆盖浏览器默认行为，需强制设置box-sizing:border-box、min-width:0、font-size≥16px、min-height:44px、line-height≤height及-webkit-appearance:none，并注意scroll-margin-bottom的使用约束与兼容性降级。
移动端表单输入体验差，八成不是逻辑问题，而是 CSS 没压住浏览器的默认行为。直接改样式往往无效，关键得先破除几个隐性约束。
为什么 width: 100% 在手机上经常不生效
iOS Safari 给 <input> 设了约 150px 的隐式 min-width，哪怕你写了 width: 100%，它也优先守着底线；Android 则对 box-sizing 更敏感，content-box 下 padding 会额外撑宽。
- 所有表单控件统一加
box-sizing: border-box - 显式设
min-width: 0（否则 Safari 忽略width: 100%） - 避免在父容器设
padding后让子input写width: 100%——应把padding移到控件自身，或用calc(100% - 2rem)补偿 - 禁用
fieldset/legend默认边距和边框，否则干扰整体宽度计算
如何让 textarea 高度随内容伸缩
height: fit-content 在 iOS Safari 16.4+ 才稳定，老版本必须靠 JS 补位；但 CSS 层面仍需配合，否则滚动条闪现、光标偏移、文字被裁都是常态。
- 基础样式必含：
min-height: 44px、height: auto、resize: none、overflow: hidden -
min-height: 44px是为满足移动端最小可点击区域规范，不是“看着够高就行” - 别依赖
scrollHeight在focus瞬间取值——iOS 键盘弹出前视口未压缩，值偏大；建议监听window.visualViewport?.addEventListener('resize', ...)或setTimeout(..., 300)后再计算
怎么防止软键盘弹出时输入框被遮挡
scroll-margin-bottom 是目前最轻量、最可靠的方案，但它不是“写了就生效”，而是一套组合约束：缺一不可，且 Android 微信完全不支持。
立即学习“前端免费学习笔记（深入）”；
- 输入框必须在**可滚动容器内**：父级需设
overflow-y: auto且有明确高度，推荐min-height: 100dvh（Chrome 105+/Safari 16.4+），降级写法是min-height: 100vh - 输入框自身不能脱离文档流：删掉
position: fixed、transform、perspective或will-change，否则坐标错乱，该属性彻底失效且无报错 - Android 微信不支持该属性，必须 fallback：监听
focusin后调用scrollIntoView({ block: 'nearest' })，并加setTimeout(..., 100)延迟执行，避开键盘渲染延迟
哪些样式是强制项，不是“可选项”
很多体验问题源于把关键样式当成装饰项。比如 font-size: 16px 不只是为了让字变大，而是 iOS 强制将 font-size < 16px 的 input 渲染为 16px，但点击热区仍按原始尺寸计算，造成“看着有、点不中”。
- 所有表单控件强制设
font-size: 16px或更大，推荐用clamp(1rem, 4vw, 1.25rem) -
min-height: 44px+padding替代单纯调height，确保触控目标达标且文字不被截 - 显式设置
line-height，并确保它 ≤height（例如height: 44px; line-height: 44px），否则 iOS 光标会偏移或文字顶部被裁 - 加
-webkit-appearance: none再自定义样式，否则 Android 原生输入框可能忽略padding
真正卡住用户的，从来不是“没写样式”，而是写了却没覆盖浏览器的隐式规则——比如 min-width、box-sizing 默认值、visualViewport 变化时机、或微信 WebView 的兼容断层。这些点一旦漏掉一个，整个自适应逻辑就断在用户手指落下的那一秒。
