底部固定悬浮菜单条应直接用语义化包裹标签，设role="navigation"和aria-label="底部导航"，每个链接加aria-current="page"标识当前页，css用position: fixed; bottom: 0; width: 100vw; z-index: 1000; box-sizing: border-box确保不遮挡内容且适配移动端。
底部固定悬浮菜单条的HTML结构怎么写
直接用语义化标签，别套
堆砌。用 每个菜单项需有明确的
不要用
<nav></nav> 包住菜单项，每个按钮用 <a></a> 或 <button></button>，避免用 <div> + JS 模拟点击——既不语义也不可访问。<ul>
<li>必须加 <code>role="navigation" 和 aria-label="底部导航"（尤其当页面有多个 nav 时）
aria-current="page" 标识当前页（服务端渲染或 JS 切换后要同步更新）display: none 隐藏非激活项，改用 visibility: hidden + height: 0 配合 overflow: hidden，否则 VoiceOver 可能跳过CSS实现“底部固定”但不遮挡内容的关键写法
position: fixed 是基础，但手机端真正麻烦的是 Safari 的地址栏缩放、iOS 键盘弹出、viewport 缩放导致的定位偏移。
- 必须设
bottom: 0，不能用top: auto或inset（部分 Android WebView 不支持） - 宽度必须为
100vw，不是100%（后者受父容器 padding 影响，易出现横向滚动条） - 加
z-index: 1000，但别盲目设 9999——检查你项目里 modal、toast 的 z-index 基线，保持层级合理 - 用
box-sizing: border-box，所有 padding/margin 在内部计算，避免高度溢出
<nav role="navigation" aria-label="底部导航" style=" position: fixed; bottom: 0; left: 0; width: 100vw; z-index: 1000; box-sizing: border-box; "><a href="/home" aria-current="page">首页</a> <a href="/search">搜索</a> <a href="/cart">购物车</a> </nav>
为什么iOS上菜单会被键盘顶上去或错位
这不是你的CSS写错了，是 Safari 对 fixed 元素在软键盘唤起时的重排逻辑缺陷：它会把 viewport height 当作可视区高度，但键盘弹出后实际可用高度变小，fixed 元素却仍按原始 viewport 计算位置。
- 最简解法：监听
focus事件，在 input/textarea 获焦时临时给<nav></nav>加position: absolute+bottom: 0，失焦再切回fixed - 更稳方案：用
@media (pointer: coarse)+height: 100dvh替代100vh，但注意dvh在 iOS 16+ 才稳定支持 - 别信“加
viewport-fit=cover就行”——它只影响刘海屏适配，不解决键盘问题
点击区域太小，手指点不准怎么办
移动端最小可点击区域规范是 44×44px，但很多人只设了文字大小，忽略 padding 和 line-height。
- 每个菜单项外层用
<a></a>，不要包在<span></span>里再绑 click - 给
a设display: flex+flex-direction: column+justify-content: center，确保图标和文字都居中且点击热区完整 - 必须设
padding: 12px 0（上下留白补足高度），再用min-height: 44px强制保底 - 图标用 inline SVG 或系统字体图标（如
font-family: 'SF Symbols'），别用 background-image——后者无法随文字缩放，高DPI屏下模糊
真正的难点不在“怎么固定”，而在“固定之后如何不被系统行为破坏”。iOS 键盘、Android 输入法、PWA 添加到主屏幕后的 viewport 行为，都会让同一段 CSS 表现出不同结果。先跑通 focus/blur 的临时降级逻辑，再考虑 dvh 或 resize 监听，比一开始就堆 polyfill 更可靠。
