移动端底栏按钮组不能直接套用pc的flex布局，因fixed在ios safari等环境中受虚拟键盘、地址栏变化影响导致跳动或遮挡；应使用fixed锚定外层+grid控制双列按钮，并设width:100vw、min-width、44px触控区及语义化group包裹。
移动端底栏按钮组为何不能直接套用 PC 的 flex 布局
因为 position: fixed 在 iOS Safari 和部分安卓 WebView 中对 bottom 的计算常受虚拟键盘、地址栏收起/展开影响，导致底栏“跳动”或遮挡；单纯用 display: flex 水平排布两个按钮，在小屏上容易挤压文字或图标变形，尤其当按钮含文字+图标时。
真正稳定的方案是：外层容器用 position: fixed + bottom: 0 锚定，内层按钮组用 display: grid 控制双列结构，并显式设定最小宽度和高度，避免缩放抖动。
- 外层容器必须设
width: 100vw（不是100%），否则在横屏切换或页面缩放时会漏边 - 两个按钮需统一用
aspect-ratio: 1 / 1或固定min-width（如min-width: 88px），防止 iOS Safari 自动缩放文本破坏布局 - 禁用
user-scalable=yes的 meta 设置，否则双击放大后底栏错位无法恢复
如何用 HTML + CSS 实现“购买”与“加入购物车”的双按钮结构
不要用两个独立的 <button></button> 并列——那样语义弱、焦点顺序难控、无障碍支持差。正确做法是用一个 <div role="group"> 包裹两个语义化按钮，并通过 <code>aria-label 明确区分用途。
<div role="group" aria-label="商品操作底栏"> <button type="button" class="btn-buy" aria-label="立即购买">购买</button> <button type="button" class="btn-cart" aria-label="加入购物车">购物车</button> </div>
-
class="btn-buy"和class="btn-cart"必须有独立样式，不能共用同一 class，否则后续扩展“收藏”“分享”按钮时难以覆盖 - 按钮内文本必须简短（中文 ≤2 字），否则在 375px 屏宽下必然换行，触发重排；图标建议用 inline SVG，而非字体图标（iOS 对 WebFont 加载时机敏感）
- 点击区域至少保证
44px × 44px，这是 WCAG 和 Apple HIG 的最低触控要求，padding要作用在按钮内部，而非靠外层 margin 撑开
为什么 z-index 设为 999 还会被弹窗遮住
常见错误是只给底栏设 z-index: 999，但没管它的父容器层级。如果底栏被包在 <main></main> 或某个 position: relative 的区块里，而弹窗（如优惠券浮层）是挂载在 下的，那底栏实际堆叠上下文被截断，z-index 失效。
- 底栏容器必须是
直接子元素，或确保其祖先链中无position: relative/absolute/fixed且带z-index - 推荐写法：
<div id="bottom-bar" style="position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 2147483647;"> —— 用最大安全整数，避开第三方 SDK（如埋点、客服）的 z-index 冲突 <li>若使用 Vue/React，务必确认组件挂载点不在某个局部 <code>createPortal容器里，否则 Portal 的父节点可能自带 stacking context - 必须配合
touchstart和touchend手动切换 class，例如添加is-pressed类，并在 CSS 中定义该状态的背景色/opacity 变化 - 禁止用
pointer-events: none禁用按钮（比如 loading 状态），这会导致 iOS 无法触发touchend，按钮卡死 - 加载态建议用 SVG 动画（如旋转环），而非纯 CSS
animation，后者在低端安卓机上易掉帧，造成“按钮消失”错觉
点击后按钮状态反馈为何在真机上不明显
很多开发者只加了 :active 伪类，但在 iOS 上，:active 默认延迟约 300ms 触发，且仅在手指按下瞬间生效，松手即消失，用户根本感知不到。
