移动端输入框需统一设box-sizing:border-box、min-width:0、font-size≥16px、min-height:44px、line-height≤height，并用scroll-margin-bottom防键盘遮挡（前提：可滚动容器内且无transform等脱离文档流属性）。
移动端输入框样式“看起来正常”不等于“用起来顺手”，很多问题出在 iOS Safari 的隐式约束和 Android 对盒模型的敏感上——比如 width: 100% 失效、点击区域小、光标偏移、键盘弹出后被遮挡，这些都不是 bug，而是浏览器对表单控件的默认保护逻辑在起作用。
为什么 width: 100% 在手机上经常不生效
根本原因有两个：一是浏览器默认 box-sizing: content-box，width: 100% 只算内容区，加上 padding 和 border 就溢出；二是 iOS Safari 给 input 施加了约 150px 的隐式 min-width，哪怕你写了 width: 100%，它也优先守着底线。
实操建议：
- 所有表单控件统一加
box-sizing: border-box -
input、select、textarea必须显式设min-width: 0 - 避免对包裹
div设padding后再让子input写width: 100%——应把padding移到控件自身，或用calc(100% - 2rem)补偿 - 禁用
fieldset/legend默认边距和边框，否则会干扰整体宽度计算
min-height: 44px 和 font-size 不是可选项
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
scroll-margin-bottom 防遮挡，但有硬性前提
这是目前最轻量、最可靠的防键盘遮挡方案，但它不是“写了就生效”，而是一套组合约束：
实操建议：
- 输入框必须在**可滚动容器内**：父级需设
overflow-y: auto且有明确高度，推荐min-height: 100dvh（Chrome 105+/Safari 16.4+），降级写法是min-height: 100vh - 输入框自身不能脱离文档流：删掉
position: fixed、transform、perspective或will-change，否则getBoundingClientRect()坐标错乱，该属性彻底失效且无报错 - Android 微信不支持该属性，必须 fallback：监听
focusin后调用scrollIntoView，并加setTimeout延迟 100ms 再执行，避开键盘动画起始帧
textarea 自适应高度不能只靠 height: auto
height: fit-content 在 iOS Safari 16.4+ 才稳定，老版本必须靠 JS 补位。但 CSS 层面仍需配合，否则会出现滚动条闪现、高度突变等问题。
实操建议：
- 基础样式必须包含：
min-height: 44px、height: auto、resize: none、overflow: hidden - 禁用水平拉伸：
resize: vertical或none，防止用户拖拽破坏响应式流 - 别依赖
scrollHeight在focus瞬间取值——iOS 键盘弹出前视口未压缩，值偏大；建议在window.visualViewport?.addEventListener('resize', )或setTimeout(, 300)后再计算
真正难的不是写多少 CSS，而是理解哪些行为是浏览器主动干预的、哪些样式会被系统覆盖、哪些属性只在特定上下文中生效。比如 scroll-margin-bottom 看似简单，但一旦父容器用了 transform，它就完全静默失效——这种细节不踩一遍坑很难记住。
