全屏背景图在软键盘弹出时被顶起，本质是视口单位失效及 background-attachment: fixed 在移动端被浏览器禁用；唯一稳定方案是用 position: fixed 的 替代，并配合 visualViewport 动态修正高度。
全屏背景图在软键盘弹出时被顶起，本质不是图片动了，而是你依赖的视口单位（100vh、background-attachment: fixed）在键盘唤起后失效或错位。纯 CSS 无法可靠解决，必须用 position: fixed + visualViewport 或降级 window.innerHeight 动态控制高度。
为什么 background-attachment: fixed 在移动端根本不能用
这不是写法问题，是浏览器主动禁用：iOS Safari 和 Android Chrome 均不支持该属性在滚动场景下的稳定渲染，轻则背景跳帧、卡顿，重则白屏或直接回退为 scroll 行为。桌面端尚可一试，移动端请立刻放弃。
-
background-size: cover和background-position: center center再全也没用，底层机制已失效 - 别在
或上设background-attachment: fixed—— 某些安卓 WebView 会直接忽略整条规则 - 伪元素（如
body::before）配position: fixed看似可行，但若父容器没设z-index: -1或漏了pointer-events: none，仍会拦截点击
用 <img alt="如何实现移动端页面全屏背景图不被键盘顶起_利用CSS固定定位与height动态计算" > + position: fixed 替代才是真·全屏固定
这是目前唯一能跨 iOS/Android 稳定运行的方案，关键不在“加图片”，而在图层隔离和事件穿透。
-
<img alt="如何实现移动端页面全屏背景图不被键盘顶起_利用CSS固定定位与height动态计算" >必须设：position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;（注意：不是100%） - 加
object-fit: cover确保裁切适配，加z-index: -1压到内容下方 - 必须加
pointer-events: none，否则所有点击都会被图片截获（连 input 都点不中） - 若页面存在横向滚动，
width: 100vw可能导致右侧留白 → 改用min-width: 100vw - 内容容器需显式设
position: relative，否则z-index: -1在部分安卓 WebView 中会失效
键盘弹出时 100vh 高度崩塌，怎么动态修正
iOS Safari 把地址栏高度算进初始 100vh，Android 则在键盘弹出时直接压缩 window.innerHeight；两者都导致背景图底部被顶出可视区。不能靠媒体查询，只能监听视口变化。
立即学习“前端免费学习笔记（深入）”；
- 优先用
visualViewport.height：比resize更准、无抖动，现代浏览器（Chrome 61+ / Safari 15.4+）均支持 - 初始化时存基准值：
const baseHeight = visualViewport.height; - 监听
visualViewport.addEventListener('resize', () => { ... })，计算差值：const kbHeight = baseHeight - visualViewport.height; - 用
transform: translateY(${kbHeight}px)移动背景图容器，比改top或height更少触发重排 - 降级方案：对不支持
visualViewport的环境（如 iOS 15.3），监听focusin+setTimeout(() => { window.innerHeight }, 0)读取真实高度
容易被忽略的兼容细节
最常栽跟头的地方不在主逻辑，而在边界条件处理：
-
100vh在 iOS 地址栏收起瞬间会短暂“撑高”，导致背景图溢出 → 改用min-height: 100dvh（iOS 16.4+/Chrome 105+），降级 fallback 必须带防抖 -
visualViewport在某些安卓 WebView（如微信内置 X5）中返回null→ 必须先做if ('visualViewport' in window)检测 - 背景图容器若用了
will-change: transform，在部分低端 Android 机上反而引发闪烁 → 仅在检测到键盘展开后才动态添加 - 不要给
<img alt="如何实现移动端页面全屏背景图不被键盘顶起_利用CSS固定定位与height动态计算" >设loading="lazy"—— 键盘弹出时可能触发懒加载，造成背景闪现或空白
