移动端表单输入框“点不中”是因ios safari静默拦截min-width/min-height
移动端表单输入框点击“点不中”不是代码写错了，而是浏览器根本没把它当可点击目标——iOS Safari 会静默拦截 min-width 或 min-height 小于 44px 的元素的 touchstart，哪怕它视觉上看着挺大。
为什么加了 padding 还是点不中
常见错误是只改 padding 却忽略两个硬性前提：一是元素本身 width 或 height 被设为 auto 或 0，导致浏览器计算出的点击热区实际为 0；二是父容器或祖先元素设置了 touch-action: none，直接继承覆盖掉子元素的触摸行为。
-
.form-control必须显式声明min-width: 44px和min-height: 44px，不能只靠padding撑开 - 若用
input做图标按钮（如搜索放大镜），它默认是行内元素，得加display: inline-block才让min-height生效 - 检查 computed 样式里
touch-action的最终值，不是看你自己写的那条，而是看浏览器实际应用的值
box-sizing: border-box 不是可选项，是保命线
Bootstrap 默认没统一设这个，而 iOS Safari 对 width: 100% 的 input 有约 150px 的隐式 min-width，一旦加上 padding 和 border，内容区就溢出容器，触发横向滚动或布局断裂。
- 所有表单控件必须加
box-sizing: border-box - 同时补
min-width: 0，否则 flex 容器里它会拒绝收缩 - 别在包裹
div上设padding再让input写width: 100%——把padding移到input自身，或用calc(100% - 2rem)补偿
字体大小和行高不是样式问题，是系统级触控规范
iOS 会强制将 font-size 的 <code>input 渲染为 16px，但点击热区仍按原始尺寸算，造成“看着有、点不中”。这不是模糊，是坐标错位。
- 强制设
font-size: clamp(1rem, 4vw, 1.25rem)，比单纯写16px更稳，兼顾小屏可读与大屏不撑 -
line-height必须 ≤height，例如height: 44px; line-height: 44px，否则光标偏移或文字顶部被裁 - 禁用原生样式干扰：
-webkit-appearance: none，否则 Android 可能忽略你设的padding
键盘弹出后输入框被遮挡？scroll-margin-bottom 有严格前提
这个属性确实能防遮挡，但它不是“写了就生效”的魔法。它依赖元素在可滚动容器内的精确坐标，而 transform、position: fixed、will-change 都会让坐标失效，且无任何报错提示。
- 父容器必须设
overflow-y: auto且有明确高度，推荐min-height: 100dvh（Chrome 105+/Safari 16.4+），降级用min-height: 100vh - 输入框自身不能有
transform、perspective或position: fixed - 真机测试时，iOS 键盘高度和滚动惯性跟 Chrome DevTools 模拟完全不同，必须实测
最常被忽略的是：这些规则不是独立生效的，而是环环相扣。比如没设 min-height: 44px，scroll-margin-bottom 就可能因元素高度计算异常而失效；没关 -webkit-appearance，padding 就可能被原生样式覆盖。每一条都得在真机上连着验证，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
