移动端背景渐变无法覆盖全屏的根本原因是容器高度塌陷或渲染区域被截断，而非渐变语法错误；需用min-height: 100vh配合独立wrapper、避免overflow: hidden、添加fallback色块并注意兼容性处理。
移动端背景渐变无法覆盖全屏，根本不是渐变写错了，而是容器高度塌陷或渲染区域被 Bootstrap 栅格、视口单位计算偏差、祖先元素 overflow 等因素截断——background: linear-gradient() 本身不解决高度问题，它只负责“怎么填色”，不负责“填多高”。
为什么 background: linear-gradient() 在移动端只显示一条细线
常见现象是渐变只出现在顶部几像素，或者左右留白、底部突然变白。这不是 CSS 渐变语法的问题，而是父容器（比如 body 或某个 div）实际高度为 0 或远小于视口。
-
html和body默认不占满视口，height: 100%在移动端继承链中极易失效 - Bootstrap 的
.container或.row套在渐变容器外时，其padding/margin会压缩内容区，导致渐变只渲染在缩进后的区域内 - 某些安卓 WebView 或 iOS Safari 中，
100vh会把地址栏高度算进去，滚动后渐变区域“上移”或“露底”
min-height: 100vh 必须加，且不能只加在 body 上
直接给 body 加 min-height: 100vh 不够稳——如果页面有 JS 动态插入内容、或用了 position: fixed 导航栏，body 可能仍被压扁。更可靠的做法是把渐变挂到一个独立 wrapper 上。
- 结构示例：
<div class="hero-gradient"> <div class="container">...内容</div> </div>
- CSS 必须写：
.hero-gradient { min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } - 别用
height: 100vh—— 内容超长时会被截断；优先叠加height: 100dvh（Chrome 104+/Safari 16.4+ 支持），并保留min-height: 100vh降级 - 如果必须嵌套在
.container-fluid里，记得加mx-n3 px-0抵消栅格干扰
渐变覆盖不到边缘？检查祖先元素的 overflow: hidden
很多项目为了“防溢出”在 html、body 或最外层 div 上写了 overflow: hidden，这会导致渐变超出容器的部分被硬裁掉——尤其在 iOS Safari 中，100vh 计算波动时，裁切位置会随滚动跳变，看起来像“渐变忽隐忽现”。
- 打开 DevTools，在 Elements 面板逐级检查
html→body→ wrapper 元素的 computedoverflow - 删掉或临时注释掉疑似干扰的
overflow: hidden，观察渐变是否恢复铺满 - 如需防内容溢出，改用
overflow-x: hidden（仅限制水平方向）
渐变颜色在真机上发灰或偏暗？别漏 fallback 色块
移动端浏览器（尤其是低端安卓机）对 linear-gradient() 的硬件加速支持不一，加载慢或渲染失败时，整个背景会退成透明，露出底层白色或灰色背景，造成“渐变没生效”的错觉。
- 必须提供降级色块：
background: #667eea; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- 避免用
rgba()开头的渐变做 fallback，部分 WebView 不识别 rgba 为合法 color 值 - 渐变角度建议用整数（如
135deg），避免to bottom right这类关键词——iOS Safari 旧版本解析不稳定
最容易被忽略的是：渐变本身没有“响应式”属性，它不会随设备宽高比自动重算中心点。如果在小屏上关键文字被深色端盖住，得在 @media (max-width: 576px) 里手动调 background-position 或改用单色过渡。
