移动端按钮触控区不达标主因是clientWidth/clientHeight实测值低于48×48px；须显式设min-width/min-height、禁用inline显示、避免transform缩放，并用label包裹input或SVG/Canvas手动保底。
移动端触摸区域尺寸不达标，不是“看起来小”，而是 clientWidth 和 clientHeight 实测值低于 48px × 48px——浏览器不会帮你放大响应区，只按你写的 CSS 渲染，真机上点不中、连点两次才触发，基本就是这个原因。
为什么 button 的 clientWidth 经常不到 44px
默认 只被文字撑开，padding 为 0 或继承自 UA 样式（如 Chrome 移动版默认 padding 很小），font-size 升高 ≠ 点击区变大，尤其当 display: inline 或 line-height 过小时，垂直方向实际渲染高度可能只有 20px 左右。
- 用 Chrome DevTools 切换设备模拟器，选中按钮后看右下角
clientWidth/clientHeight数值，别信“看着像” - 显式写
min-width: 48px; min-height: 48px;，比只靠padding更可靠——文字短时保底，文字长时随内容扩展 - 禁用
display: inline，改用display: inline-block或display: block，避免旧 WebView 忽略上下 padding - 若按钮含 SVG 图标，检查父容器是否设了
vertical-align: baseline，它会让整个按钮基线偏移，视觉上“被压扁”
Flex/Grid 布局中点击区被压缩的补救方式
在 display: flex 容器里设 flex: 1，或 grid-template-columns: 1fr 1fr，窄屏下按钮宽度可能被压到 30px 以下——CSS 比例计算不考虑触控下限，浏览器照算不误。
- 给按钮加
min-width: max(48px, 15%);，兼顾绝对最小值和相对占比 - 父容器用
gap替代子项margin，避免负 margin 吞掉可点区域 - 禁用
transform: scale()扩展视觉大小——它不扩大事件响应区，手指点的位置还是原来那么小 - 对卡片类可点击容器，用
aspect-ratio: 1/1; width: 100%; min-block-size: 48px;防止横竖屏切换时高度塌缩
label 包裹 input 是最省心的热区放大方案
原生 会把整个盒模型（含 padding、伪元素、空白）都映射到内部 上，不依赖 JS、不走冒泡、绕过 iOS Safari 对 touch-action: none 的拦截，实测延迟最低。
-
必须是的**直接子节点**，中间不能有换行、空格或文本节点 - 禁用
pointer-events: none或opacity: 0在或其任意父级上，否则事件链中断 - 用
display: flex; align-items: center;防止被拉伸错位，尤其在 Safari 中 - 不要用
for+id方式替代包裹——它不放大热区，只做逻辑绑定
SVG 和 Canvas 的点击区必须手动保底
SVG 用 viewBox 缩放时，
- SVG 外层容器设
width: 100%; height: auto;，并加preserveAspectRatio="xMidYMid meet" - 对关键可点图形（如图标按钮），额外套一层
transform: scale(2)，再用min-width/min-height在外层容器兜底 - Canvas 点击检测必须用
getBoundingClientRect()+ 手动坐标映射，不能依赖offsetX/offsetY（高 DPR 下失准） - 所有 SVG 容器必须设
touch-action: manipulation，否则 Safari 可能忽略 touchstart
真正难的不是写 min-width: 48px，而是在动态布局、嵌套组件、第三方 UI 库介入后，还能守住每个可点元素的 clientWidth × clientHeight 下限——它需要每层都主动声明保底，而不是寄希望于某处“应该够大”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
