background-attachment: fixed 在移动端被浏览器静默降级为 scroll，导致无法实现固定背景和平铺效果；唯一稳定方案是用 position: fixed 的独立 div 模拟，并注意 viewport 设置、祖先元素干扰及视口单位适配。
background-attachment: fixed 在移动端根本不会平铺——它压根不生效，不是“不平铺”，而是被浏览器静默降级为 scroll。iOS Safari 和主流安卓 WebView（Chrome 84+、微信、QQ）全量禁用该属性，且不报错、不警告。
为什么 background-attachment: fixed 在移动端连平铺都看不到
这不是 CSS 写错了，是浏览器主动跳过渲染逻辑：每次滚动都要重绘整个视口背景图，移动端 GPU 和内存扛不住，直接忽略 background-attachment: fixed，退回到默认的 scroll 行为。所以你看到的“没平铺”，其实是它根本没走 fixed 流程，自然也不会触发 background-repeat 的 fixed 模式下定位逻辑。
- DevTools 里样式明明写着
background-attachment: fixed，但背景图照常滚动 - 桌面 Chrome 正常，真机一跑就“动起来”
- 设在
body或html上，iOS Safari 直接无视；安卓 WebView 可能卡顿甚至白屏
别试了：background-repeat + fixed 组合在移动端无效
即使你写了 background-repeat: repeat，也毫无意义——因为 fixed 不执行，repeat 就只是在 scroll 模式下对一个普通元素重复铺排，而这个元素大概率高度不够、没撑满视口，结果就是只在内容区平铺几下，边缘全是空白。
- 必须同时满足：容器高度 ≥ 视口、
background-repeat: repeat、background-position: 0 0（默认值），才可能“看起来像平铺” - 但只要用了
fixed，这套逻辑就失效；删掉fixed后，又失去“固定”效果 - 想靠媒体查询降级成
repeat+scroll？那不如直接放弃固定背景，它和“平铺”本身就是互斥目标
真正能跨端平铺 + 固定视觉效果的方案：position: fixed + 独立 div
把背景图从 CSS 属性里“摘出来”，用一个脱离文档流的 div 模拟固定层，这是目前唯一实测稳定、支持平铺（如果真需要）且不卡顿的方案。
- HTML 中必须将
<div class="bg-fixed"></div>作为的**直接子元素**，不能嵌套在<main></main>或任何 wrapper 里 - CSS 必须包含：
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1、pointer-events: none - 若要“平铺”，就在该
div上设background-repeat: repeat；若要“居中覆盖”，则用background-size: cover+background-position: center - 注意：大图或超宽图（如 3840×1080）在竖屏手机上会疯，建议用适配移动端的尺寸（如 1200×800），并压缩到 200KB 以内
容易被忽略的关键细节
哪怕结构写对了，position: fixed 层也可能错位或失效——问题往往出在 viewport 配置或祖先干扰上。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">缺一不可，否则 iOS 会缩放视口导致 fixed 锚点漂移 - 任何祖先元素设了
transform、overflow: hidden、filter或will-change，都会让 fixed 元素降级为 relative，锚定到那个父容器 -
100vw包含滚动条宽度（iOS 约 15px），右边易溢出；推荐用left: 0; right: 0;替代width: 100vw - 软键盘弹出时，部分安卓机会重算视口高度，
100vh失效；可监听focus/blur动态切回height: 100%或用env(safe-area-inset-bottom)保底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
