移动端底部导航不能只用 position: fixed，因 iOS Safari 和部分安卓 WebView 滚动时会遮挡或因地址栏伸缩导致导航跳动、消失；须配合 viewport-fit=cover、env(safe-area-inset-bottom)、避免 overflow: hidden 等方案。
移动端底部导航为什么不能只用 position: fixed？
因为 iOS Safari 和部分安卓 WebView 在页面滚动时会遮挡固定定位元素，或触发地址栏/工具栏伸缩，导致 bottom: 0 的导航栏被意外顶起、跳动甚至消失。单纯靠 CSS 固定定位在真实设备上不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
viewport设置：确保<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则 iPhone X+ 等刘海屏会裁掉底部区域 - 使用
env(safe-area-inset-bottom)补齐安全区：给导航容器加padding-bottom: env(safe-area-inset-bottom)，防止按钮被圆角/Home Indicator 遮住 - 避免在
body上设overflow: hidden—— 这会让 iOS 键盘弹出时导航栏错位
tabbar 的 HTML 结构怎么写才不踩坑？
结构要语义清晰、可访问、且适配 JS 动态切换逻辑。别用 div 堆砌，也别把所有 tab 写死在 DOM 里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<nav aria-label="底部导航">包裹，每个 tab 用<a>或<button>（纯前端路由用button，服务端渲染或需 SEO 用a） - 当前激活项必须加
aria-current="page"，例如：<button aria-current="page">首页</button> - 图标建议用
<svg>内联，避免字体图标在 iOS 上模糊或加载失败；禁用font-size: 0清空间隙 —— 它会让 VoiceOver 忽略文字
如何让底部导航在 Vue/React 里真正“保持不动”？
框架组件重渲染、路由切换、键盘弹出都可能触发布局重排，导致导航闪动或偏移。关键不是“锁住位置”，而是“隔离影响”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把导航栏抽成独立组件，挂载在根节点下（如 React 的
ReactDOM.createPortal，Vue 的teleport到#app外层），避免被父级transform或overflow干扰 - 监听
window.visualViewport（而非resize），捕获键盘弹出/收起事件：visualViewport.addEventListener('resize', () => { /* 更新高度补偿 */ }) - 不要用
height: 100vh布局主内容区 —— 键盘弹出会缩小vh，造成内容塌陷；改用min-height: 100dvh（dvh是动态视口单位，已广泛支持）
点击反馈和触控区域为什么总做不好？
移动端最小触控尺寸是 48×48px，但很多开发者只调了图标大小，忽略了整个点击热区。iOS 还有 300ms 延迟和点击高亮残留问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个 tab 的
<button>或<a>必须设min-width: 48px+min-height: 48px，用padding扩展热区，而不是仅放大图标 - 禁用 iOS 默认高亮：
-webkit-tap-highlight-color: transparent，但务必同时提供视觉反馈（比如:active背景变暗） - 慎用
touchstart替代click—— 它会破坏右键菜单、长按复制等原生行为；优先用pointer-events: auto+ 标准 click
最常被忽略的是安全区适配和键盘弹出时的视口变化 —— 这两个问题不会在桌面 Chrome 模拟器里暴露，但一上真机就立刻出错。别依赖 “看起来没问题”，一定要在 iOS 和主流安卓机上连着 DevTools 实测滚动、输入、切后台再切回来的全流程。
