移动端输入框点击热区不足的典型表现是用户点不中、点两下才触发、ios safari 上光标跳到别处；根本原因是浏览器仅将content box与padding box视为有效热区，而默认input高度仅28–32px，低于ios推荐的44px×44px最小触控目标。
移动端输入框点击热区不足的典型表现
用户点不中、点两下才触发、iOS Safari 上光标跳到别处——这些不是手滑，是 input 的可点击区域没达标。浏览器只把 content box + padding box 当作有效热区，而默认 input 高度常只有 28–32px，远低于 iOS 推荐的 44px × 44px 最小触控目标。真机上尤其明显：加了 font-size: 16px 或 line-height: 44px 都没用，热区还是窄。
必须在媒体查询里重设 height + padding + box-sizing
桌面端可能用紧凑样式，但移动端必须显式撑开热区。仅靠全局样式不够，因为部分老项目或第三方组件会覆盖。推荐写法：
@media (hover: none) and (pointer: coarse) {
input,
textarea,
select {
height: 44px;
padding: 12px 16px;
box-sizing: border-box;
font-size: 16px;
}
}
-
hover: none和pointer: coarse组合能精准命中触摸设备（比max-width更可靠，避开折叠屏误判） -
height: 44px是兜底值，确保总高度达标；padding: 12px 16px提供内边距缓冲，手指点在文字上下空白处也能响应 -
box-sizing: border-box必须加，否则padding会让总高变成44px + 24px = 68px，导致换行或遮挡
容易被忽略的三个干扰项
加了 padding 和 height 还点不灵？大概率是事件被静默拦截了：
-
pointer-events: none：检查input自身及其任意父容器（比如表单外层div或 Modal 蒙层），只要有一层是none，整个热区就失效 -
touch-action: none：常见于轮播图容器或自定义滚动区，它会禁掉所有原生触摸行为；应改为touch-action: manipulation（Bootstrap 5 默认已设，但重置 CSS 后易丢失） -
overflow: hidden：父容器设了该属性，会把padding撑出的部分裁掉——热区明明写了，手指点上去却没反应，八成是这里漏了
短文本输入框要补 min-width
像搜索框右侧的 button、单字符提交按钮（如 “→”、“×”），光有 padding: 12px 16px 可能宽度仍不足 44px。此时需单独加限制：
@media (hover: none) and (pointer: coarse) {
.search-btn,
input[type="submit"] {
min-width: 44px;
}
}
- 不要用
width: 100%强拉，会破坏 Flex 布局中的等宽逻辑 - 若按钮在 Grid 容器中，记得同时加
min-width: 0防止长文本撑宽后又被截断 - 避免只靠
text-indent或伪元素扩展热区——语义丢失、无障碍支持差、维护成本高
Computed 面板里的最终 height、padding 和 pointer-events 值。很多问题不是 CSS 写错，而是被某一层看不见的父级样式悄悄覆盖了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
