移动端按钮最小点击区域必须≥48×48px，是iOS和Android官方强制可访问性底线；须显式设置min-width/min-height，配合padding与box-sizing:border-box，并确保viewport正确配置。
移动端按钮最小点击区域必须 ≥ 48×48px
这不是建议，是 iOS 和 Android 官方可访问性底线。低于这个尺寸，手指点击容易误触或失败，尤其在高 DPR 屏幕（如 iPhone 15 Pro 的 3x）上，16px 字体 + 8px padding 实际物理尺寸可能只有约 3.5mm，远低于人手指尖平均接触面积。
关键点：
-
min-width: 48px和min-height: 48px必须显式设置，不能只靠padding或font-size推算 - 用
rem或vw时，需配合min-width/min-height兜底，防止小屏下缩得太小（例如font-size: 2.5vw在 320px 宽视口下仅约 8px） -
input[type="button"]和input[type="submit"]同样适用该标准，但它们不支持width/height，只能靠padding+min-width控制
padding + font-size 是最可靠的实际尺寸控制方式
直接设 width/height 对 button 有时生效，但对 input[type="button"] 常失效；且易被 line-height、默认 box-sizing: content-box 干扰，导致热区与视觉不一致。
推荐组合：
立即学习“前端免费学习笔记（深入）”；
- 垂直方向：用
padding-top和padding-bottom主导高度（例如padding: 12px 24px），比设height更稳定 - 文字大小：用
font-size: 1rem或clamp(14px, 2.5vw, 18px)，避免固定px值 - 必须加
box-sizing: border-box，否则padding和border会额外撑出总尺寸 - 移动端优先写成
padding: 0.75rem 1.5rem，配合根字体动态调整（如 JS 监听resize和orientationchange）
viewport 标签漏写或配错，所有适配都白搭
没这行代码，rem 不随屏幕缩放，vw 计算基准错误，媒体查询不触发——按钮再怎么调也“变不大”。
正确写法（必须放在 <head> 最前面）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
禁止出现这些配置：
-
maximum-scale=1.0或user-scalable=no：违反 WCAG 可访问性要求，双击放大被禁，影响低视力用户 -
initial-scale设为非1.0：导致根字体计算偏移，rem基准失准 - 放在 CSS 或 JS 之后：部分 WebView 会忽略
圆角/图标按钮的尺寸陷阱
圆形按钮（如头像上传）或带 SVG 图标的紧凑按钮，硬设 width/height 极易变形或错位。
安全做法：
- 圆形按钮：用
aspect-ratio: 1+border-radius: 50%，比固定width === height更健壮（aspect-ratio在 Safari 15.4+ 支持良好） - 含 SVG 的按钮：给 SVG 加
flex-shrink: 0和width: 1em，避免被 Flex 压缩；同时确保vertical-align: middle - 防文字换行：加
white-space: nowrap，否则多语言文本（如德语长词）或缩放后可能折行，意外撑高按钮 - 测试重点：iOS Safari 下检查触摸目标是否真 ≥ 44×44px（苹果人机指南），不只是“看起来大”
