移动端input点击区域小、光标偏移、键盘遮挡等问题，主因是iOS Safari对字体渲染、触控热区、视口缩放及键盘行为的特殊处理；应设min-height:44px、padding代替font-size、clamp()适配字号、line-height≤height、禁用-webkit-appearance、避免viewport缩放限制，并用JS监听resize动态调整滚动。
移动端 <input> 点击区域太小，手指点不中
根本原因是默认 font-size 过小（尤其在 iOS Safari 中），导致实际可点击的 height 和内边距不足。iOS 会强制将小于 16px 的字体渲染为 16px，但点击热区仍按原始尺寸计算，造成“看着有、点不中”。
- 确保
input元素本身设置了min-height: 44px（iOS 推荐最小触控高度） - 用
padding替代单纯调大font-size，避免文字撑出容器或换行 - 禁用
-webkit-appearance: none后再自定义样式，否则 Android 原生输入框可能忽略padding
用 viewport 缩放干扰了输入框尺寸控制
如果页面设置了 maximum-scale < 1 或 user-scalable=no，iOS 会限制缩放行为，但也可能让浏览器错误估算视口宽度，导致媒体查询失效、rem 计算偏小，最终输入框被压缩。
- 移除
maximum-scale，仅保留width=device-width, initial-scale=1 - 避免在
meta[name="viewport"]中设置固定minimum-scale或user-scalable=no—— 它们会破坏 iOS 对表单控件的自动适配逻辑 - 改用 CSS 控制尺寸：用
clamp(1rem, 4vw, 1.25rem)配合min-height，比纯rem更可靠
input[type="text"] 在 iOS 上光标偏移、文字截断
iOS Safari 对 input 的行高和基线处理特殊，当 line-height 与 height 不匹配，或父容器有 flex / vertical-align 干扰时，光标位置会错乱，甚至文字被顶部裁剪。
- 显式设置
line-height: 1.5，且确保它 ≤height（例如height: 44px; line-height: 44px） - 给
input添加box-sizing: border-box，防止padding叠加后超宽 - 避免对
input父元素设display: flex+align-items: center—— 改用padding居中更稳定
input[type="text"], input[type="email"], input[type="tel"] {
min-height: 44px;
padding: 12px 16px;
font-size: clamp(1rem, 4vw, 1.25rem);
line-height: 1.5;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
键盘弹起后输入框被遮挡或滚动异常
这不是纯 CSS 问题，但常被误认为样式缺陷。iOS 键盘弹出会触发 resize 事件并改变视口高度，若页面有 position: fixed 表单或未监听视口变化，输入框就可能被盖住。
立即学习“前端免费学习笔记（深入）”；
- 不要用
position: fixed定位输入框；改用文档流 +margin-top预留空间 - 在 JS 中监听
resize，检测window.innerHeight是否显著缩小（如下降 > 150px），然后scrollIntoView({ block: 'nearest' }) - Android 可加
android:windowSoftInputMode="adjustResize"（原生层），但 H5 页面无法控制，只能靠 CSS 预留底部空白
