底部固定栏在小屏幕被遮挡时应使用 min-height: 100dvh 替代 100vh，并监听 visualViewport resize 事件防抖处理视口恢复跳变；输入框需在 focus 时调用 scrollIntoView，避免 overflow: hidden 和 transform 模拟 fixed。
底部固定栏在小屏幕被遮挡怎么办
直接用 position: fixed + bottom: 0 在 iOS Safari 或安卓软键盘弹出时大概率失效——不是代码写错了，是浏览器把视口高度重置了。这时候 vh 会按“理论视口”算，但实际可滚动区域变小，导致栏被顶上去或截断。
- 别依赖
100vh布局整个页面，尤其当底部栏要贴底且页面内容可滚动时 - 用
min-height: 100dvh替代100vh（dvh是动态视口单位，Safari 16.4+、Chrome 105+ 支持） - 降级方案：监听
resize事件，用document.documentElement.clientHeight动态设容器最小高度
fixed 底部栏盖住输入框光标怎么破
Android 和 iOS 在软键盘唤起时，不会自动滚动到 <input> 光标位置，如果底部栏是 fixed 且高度较大，光标可能被挡住，用户看不见自己在输什么。
- 给输入框加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，触发时机选focus而非click - 避免给
body设overflow: hidden，否则 iOS 会禁掉自动滚动 - 不要用
transform: translateY()模拟 fixed 效果——它绕过浏览器对表单元素的焦点滚动逻辑
如何让 fixed 底部栏不随页面滚动抖动
某些安卓机型上，position: fixed 在快速滚动时会出现 1–2px 抖动，本质是浏览器合成层没正确提升该元素。
- 强制开启硬件加速：
transform: translateZ(0)或will-change: transform - 确保父容器没设
overflow: hidden或clip-path，这些会剪裁 fixed 元素的渲染层 - 避免在 fixed 元素里嵌套大量重绘内容（比如实时图表），优先用
contain: layout paint隔离
要不要用 sticky 替代 fixed
如果底部栏只在页面滚动到底部时才出现，position: sticky 更轻量、无兼容性陷阱，且天然适配软键盘行为；但如果要求“永远可见”，sticky 不行——它依赖父容器高度和滚动边界。
-
sticky的bottom值只在父容器高度 > 视口时生效，否则退化为 static - 想兼顾“始终可见”和“不遮挡输入”，可以结合：默认用
fixed，检测到visualViewport高度突变（软键盘弹出）时临时切为absolute+ bottom 计算 - 注意
sticky在 Safari 旧版本（≤15.6）对bottom支持不稳定，建议加@supports (position: sticky)条件判断
实际最难调的不是样式，是软键盘收起后视口恢复延迟导致的布局跳变——这个得靠 visualViewport 的 resize 事件配合防抖，而不是等 window.resize。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
