移动端input width: 100%不生效主因是缺失viewport设置，需添加；其次默认box-sizing为content-box，应设为border-box并重置相关输入框样式。
input width: 100% 在移动端不生效？先看 viewport 设置
很多情况下，width: 100% 写对了，但输入框还是窄窄的一条——根本原因是页面没告诉浏览器“按设备宽度来渲染”。移动端浏览器默认模拟桌面视口（通常 980px 左右），导致 100% 是按那个虚拟宽度算的，不是你手机屏幕的真实宽度。
必须加这行 <meta name="viewport" content="width=device-width, initial-scale=1"> 到 里，否则后续所有 CSS 都在错误基准上运行。
- 缺这行，
width: 100%可能只占“虚拟视口”的一部分，尤其在 iOS Safari 中特别明显 -
initial-scale=1不可省略，否则某些安卓浏览器会自动缩放，让 100% 失效 - 不要写成
width=100%或width=100vw，device-width是关键字，不能替换
input 设置 width: 100% 后仍溢出？检查 box-sizing 和 padding
默认 box-sizing 是 content-box，这意味着 width: 100% 只管内容区，加上 padding 和 border 就会撑出父容器。这是移动端输入框最常“破框”的原因。
直接给所有输入框统一重置：
input[type="text"], input[type="email"], input[type="tel"] {
box-sizing: border-box;
width: 100%;
}
- 务必用
border-box，否则padding: 12px会让实际宽度变成100% + 24px - 避免只写
input { ... }，因为input[type="submit"]等按钮型输入框不需要 100% 宽度 - 如果用了 CSS 框架（如 Bootstrap），确认它没覆盖你的
box-sizing设置
iOS Safari 中 placeholder 挤压输入框？用 -webkit-appearance
iOS Safari 默认会给 input 加一堆私有样式，包括内边距和圆角，有时会让 width: 100% 表现不稳定，尤其配合 placeholder 时，文字可能被裁掉或触发横向滚动。
加这一句能清掉大部分干扰：
input {
-webkit-appearance: none;
}
-
-webkit-appearance: none不会移除功能，只剥离浏览器默认 UI 样式 - 加上后，你得手动补
border、background等基础样式，否则输入框可能“看不见” - Android Chrome 一般不受影响，但加了也没副作用，建议统一写上
需要适配不同字体大小或缩放？慎用 vw 和 %
用户手动放大字体（比如系统设置“更大字体”或浏览器缩放）时，width: 100% 依然可靠；但 width: 100vw 会强制拉满整个视口，可能盖住右边操作按钮，或者在横屏时异常拉伸。
- 优先用
width: 100%，它基于父容器，更可控 - 避免
vw，除非你明确要脱离布局流（比如全屏搜索框） - 如果父容器有
padding，而你又希望输入框真正“顶到边”，用width: calc(100% + 2 * var(--pad))并配合margin: -var(--pad)，但多数情况没必要这么复杂
真正难搞的不是写法，而是各种浏览器对表单控件的私有渲染逻辑不一致——iOS 的 input、安卓老版本 WebView、微信内置浏览器，都可能偷偷加 margin 或调整 line-height。所以测试时一定真机连着 devtools 看 computed styles，别只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
