按钮应设width: 100%、max-width: 480px、padding: 12px 20px并配合box-sizing: border-box防溢出；字号用clamp(14px, 4vw, 18px)适配屏幕；min-height: 44px加padding扩点击区；底部留safe-area-inset-bottom安全距。

按钮宽度撑满手机视口但保留内边距

直接写 width: 100% 容易让按钮贴到屏幕边缘，实际需要的是「内容区占满，但有安全间距」。用 max-width + padding 组合更可控：

.add-to-cart {
  width: 100%;
  max-width: 480px; /* 防止在大屏平板上过宽 */
  padding: 12px 20px;
  box-sizing: border-box;
}

注意必须加 box-sizing: border-box，否则 padding 会额外增加总宽度，导致横向滚动条。

文字不换行又不溢出的响应式字号

手机小屏上「加入购物车」六个字容易折成两行或撑破按钮。别用固定 font-size，改用 clamp()：

.add-to-cart {
  font-size: clamp(14px, 4vw, 18px);
}

这个写法的意思是：最小 14px、最大 18px、中间按视口宽度 4% 线性缩放。实测在 iPhone SE（375px）显示约 15px，在 iPhone 14 Pro Max（430px）显示约 17px，刚好可读又不挤。

点击区域太小导致误操作

移动端最小触控目标建议 ≥44×44px，但按钮本身可能只有 36px 高。解决方案不是拉高按钮，而是扩大可点击范围：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.add-to-cart {
  min-height: 44px;
  padding-top: 14px;
  padding-bottom: 14px;
}

这样视觉高度还是 36px（12px 内边距 + 12px 行高），但上下各多出 2px 可触区域，符合 WCAG 标准。另外务必确认没写 touch-action: manipulation —— 这个属性在某些安卓浏览器里会禁用双击缩放，反而影响体验。

按钮被底部导航栏遮挡的常见场景

很多电商页用 position: fixed 做底部导航，而购物车按钮放在页面最下方时会被盖住。解决方式不是调 z-index，而是给按钮父容器加安全距离：

.cart-section {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}

同时确保该容器没有 overflow: hidden，否则 iOS 的 env(safe-area-inset-bottom) 不生效。如果项目还没适配刘海屏，这个值至少设成 80px 保底。

实际调试时最容易漏掉的是 viewport meta 标签是否正确——没有 width=device-width, initial-scale=1，上面所有 CSS 都白搭。另外 Safari 对 clamp() 支持从 iOS 14.5 开始，老版本需 fallback。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！