移动端 input 默认不占满父容器，需显式设置 width: 100% 并配合 box-sizing: border-box；注意软键盘缩放、字体继承及真机测试。
移动端 input 宽度撑不满父容器？
默认情况下，input 在 ios safari 和部分 android 浏览器里不会自动占满父容器宽度，尤其在设置了 box-sizing: border-box 但没显式设 width: 100% 时。这不是 bug，是浏览器对表单控件的默认样式重置策略不同导致的。
- 必须给
input显式设置width: 100%，不能只靠display: block - 如果父容器有
padding，要配合box-sizing: border-box，否则实际宽度会超出 - 避免用
max-width: 100%替代width: 100%—— 它只限制上限，不保证拉伸 - iOS 上某些版本对
input[type="search"]有额外内边距，需用-webkit-appearance: none重置
box-sizing 不生效？检查是否被表单重置样式覆盖
css 重置库（如 Normalize.css）或某些 ui 框架（如 bootstrap）会为 input 单独设置 box-sizing: content-box，这会让 padding 和 border 外扩，破坏全宽预期。
- 用开发者工具检查计算后的
box-sizing值，别只看 CSS 文件里写的 - 优先在
input选择器上加box-sizing: border-box !important（仅限必要场景） - 更稳妥的做法是：统一重置所有表单控件的
box-sizing，例如input, select, textarea, button { box-sizing: border-box; }
软键盘弹出后页面缩放或布局错乱
Android 和旧版 iOS 在软键盘唤起时可能触发页面缩放（尤其是设置了 viewport 的 user-scalable=yes），导致输入框视觉偏移、宽度重算异常。
- 确保
中不含user-scalable=yes - 不要依赖
window.innerWidth动态调整输入框宽度 —— 键盘弹出时该值会突变，造成抖动 - 若需监听键盘状态，用
focus/blur事件比监听窗口尺寸更可靠 - 某些 Android webview 对
height: 100vh有误判，全宽输入框若嵌在vh容器里，键盘弹出会挤压内容，建议改用min-height或flex布局
使用 rem 或 em 设置 input 内边距时文字被截断
当用相对单位设置 padding，而父元素字体大小未继承或被重置（比如 body { font-size: 14px; } 但 input 默认用系统字体），会导致内边距计算失准，文字紧贴边框甚至被裁剪。
立即学习“前端免费学习笔记（深入）”；
- 给
input显式声明font-size: inherit，确保它和父容器一致 - 避免在
input上直接用em设padding—— 它基于自身字体大小，而输入框字体常不可控 - 更稳的方式是：用
rem配合根字体统一控制，或直接用px设固定内边距（如padding: 12px） - 注意
line-height未设置时，文字垂直居中可能不准，建议设为与height一致（如height: 48px; line-height: 48px;）
事情说清了就结束。真正难处理的不是“怎么写”，而是不同机型 + 系统版本 + WebView 内核组合下，input 的渲染行为差异太细碎，必须真机连测，不能只信模拟器。