移动端购物车按钮必须显式设置 min-width: 48px 和 min-height: 48px，并配合 padding 扩展热区；flex: 1 或 width: 100% 无法保障最小触摸面积，SVG 图标需外层容器兜底，真机验证必不可少。
购物车按钮在移动端必须保证可点、可识别、不误触，48px×48px 是硬性物理尺寸底线，不是“看着差不多”就行。
为什么 width: 100% 或 flex: 1 会让按钮在小屏上点不了
Flex 容器里写 flex: 1 或父容器设 width: 100%，按钮视觉上撑开了，但实际点击热区可能被压缩到 20px 甚至更窄——尤其当周围有图标、文字、边距或 gap 不一致时。浏览器不会因为你写了 flex: 1 就自动保障最小触摸面积。
- 真机测试中，
flex: 1在 iPhone SE（320px 宽）下常把两个并排按钮压成 38px 宽，低于 48px 下限 -
width: 100%在嵌套 flex 容器中容易被多层min-width: auto覆盖，最终计算值远小于预期 - 用
transform: scale(1.2)放大按钮？视觉变大了，但事件响应区域不变，还是点不中
min-width 和 min-height 必须显式写死
别指望媒体查询断点或 rem 换算能兜底，直接上保底尺寸最可靠。移动端所有可点击的购物车按钮，都该带这两条：
.add-to-cart-btn {
min-width: 48px;
min-height: 48px;
padding: 8px 16px; /* 内边距扩展热区，比改 width 更安全 */
box-sizing: border-box;
}- 优先用
min-width而非width，避免在宽屏下被拉得太胖 - 如果按钮内只有图标（如
🛒），必须靠padding把热区撑到 48px，不能只靠字体大小 - iOS Safari 对
min-height渲染更敏感，漏掉它，按钮在 iPhone 上常被压扁
按钮文字过长时怎么不破坏热区
“立即加入购物车”这种长文案，在窄屏上要么换行挤高按钮，要么溢出裁剪——但无论哪种，都不能让 min-height 失效。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: normal允许换行，再配text-align: center居中 - 用
line-height: 1.4控制行高，避免单行太高撑开热区 - 禁用
overflow: hidden或text-overflow: ellipsis在按钮上——省略号会掩盖可点状态，用户不知道这是个按钮 - 真机验证时重点看：横屏切回竖屏后，按钮是否仍保持可点；键盘弹起后，按钮有没有被顶出可视区
SVG 图标按钮的热区最容易被忽略
用 <svg> 做“+”号加购图标很常见，但默认 SVG 的 viewBox 和缩放会让实际点击区远小于 48px。
- SVG 外层必须包一层
<div class="btn-wrapper">，并给它设min-width: 48px; min-height: 48px; - SVG 本身设
width: 100%; height: 100%;，且preserveAspectRatio="xMidYMid meet" - 别用
font-size: 12px+inline-block包 SVG——它撑不开高度，热区还是不够 - 真机连上 Chrome DevTools 远程调试，用“Toggle device toolbar”选 iPhone 14 Pro，再点“Capture node screenshot”，截图里量像素，确认热区达标
真正卡住项目的，从来不是“怎么让按钮变宽”，而是“怎么确保它在任何设备、任何缩放、任何输入法弹出状态下，始终有 48px×48px 的物理点击空间”。这点不验真机，光看模拟器就等于没做。
