触摸屏按钮最小点击热区应设为48px×48px，这是wcag 2.1及ios/android官方规定的系统级判定阈值，需显式声明min-width和min-height，仅靠padding无法保证热区准确生效。
触摸屏按钮最小点击热区该设多大
48px × 48px 是 WCAG 2.1 和 iOS/Android 官方推荐的最小可触控区域，不是“建议”，是实际生效的系统级判定阈值。低于这个尺寸，部分安卓 WebView（尤其 Android 6–8）会直接忽略 touchstart，iOS Safari 则可能触发误判或延迟响应。
-
min-width: 48px和min-height: 48px必须显式声明，仅靠padding不够——某些 WebView 对内边距的热区映射不准确 - 文字内容若撑不满 48px 高，用
line-height: 48px强制垂直居中，比单纯加大font-size更稳 - 图标按钮务必单独设
width和height，别依赖font-size控制 SVG 或 icon font 大小，否则在缩放辅助开启时热区塌缩
移动端 hover 为什么点了没反应
:hover 在绝大多数触摸设备上默认不触发，不是 bug，是规范行为。iOS Safari 只在“悬停超过 1.5 秒且无后续触摸动作”时模拟 hover，这和按钮点击逻辑完全冲突。
- 把悬停效果改成交互态：监听
touchstart和mousedown，动态加.is-active类控制样式 - 禁用
transition: all，只对background-color和transform做过渡，避免低端安卓机因重绘掉帧导致反馈滞后 - 用
@media (pointer: coarse)区分触控设备，里面可加伪元素蒙层或放大反馈区域，.btn::after { content: ""; position: absolute; inset: -8px; }
响应式断点怎么设才不踩坑
别按设备型号设断点，按内容承载能力和手指操作精度设。三个真实有效的临界宽度就够了，再多纯属增加维护负担。
-
@media (min-width: 480px)：防 iPhone SE 横屏文字折行，同时保证按钮不被挤压变形 -
@media (min-width: 768px)：平板竖屏最小可用宽度，此时可恢复hover样式（但依然要保留触控 fallback） -
@media (min-width: 1024px)：桌面端起始，可启用位移 + 阴影等完整过渡 - 所有断点统一用
min-width向上覆盖，避免max-width与后续规则冲突；断点值写整数，如480px，别写480.01px
fixed 悬浮按钮在手机上点不中的真正原因
不是 CSS 写错了，是 fixed 元素在部分 WebView 中的坐标校准失效——尤其当页面有 transform、键盘弹出或启用了系统缩放辅助时，视觉位置和触摸命中区出现偏移。
- 禁用
user-scalable=yes，否则缩放会破坏 fixed 锚点 - 避免给
body或根容器设transform，它会让 fixed 元素相对视口错位 -
bottom优先用px（如bottom: 24px），不用vh（iOS Safari 渲染抖动）或rem（键盘弹出会重算根字号） - 需要适配全面屏时，用
bottom: calc(24px + env(safe-area-inset-bottom))，而不是媒体查询判断机型
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
