移动端渐变背景“高度计算错误”的本质是容器无高度，导致background-image无渲染参照；需用min-vh-100/dvh-100设高、加background-color兜底、避免嵌套.container/.row，并确保祖先无overflow:hidden。
移动端背景渐变“高度计算错误”，本质是容器没高度，background-image: linear-gradient() 没参照物可渲染——不是渐变写错了，也不是颜色不生效，而是整个背景层压根没撑开。
为什么 bg-gradient 在移动端看起来“只有一条线”或“完全不显示”
常见现象：PC 上正常，iOS Safari 或 Chrome for Android 里渐变只占顶部几像素，甚至空白；DevTools 里看到元素 height: auto 或 0px，Computed 中 background-image 显示为 none。
-
bg-gradient类本身不提供高度，它只注入background-image声明，依赖父级有明确高度才能渲染 - Bootstrap 的
.container、.row默认由内容撑高，空容器或纯文字容器在移动端常因行高、缩放、字体加载延迟导致高度塌陷 - 如果用了
min-height: 100%，但html和body没设height: 100%，或中间某层用了flex却没设flex: 1，链路就断了 - 某些自定义 SCSS 构建中禁用了
$enable-gradients: false，bg-gradient类被编译剔除，但控制台无提示
必须加 min-height: 100vh，但优先用 100dvh
100vh 在移动端地址栏收起/展开时不会重算，导致渐变区域突然裁切或留白；100dvh 是动态视口单位，2026 年主流浏览器已广泛支持。
- 直接用 Bootstrap 工具类：
min-vh-100 dvh-100（min-vh-100作降级，dvh-100作主高度） - 若需兼容 iOS 15 及更早版本，加 JS 动态设置 CSS 变量：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，并在resize和orientationchange时更新 - 别用
height: 100vh—— 内容超长时会截断，且移动端动画过程中易触发滚动条消失
渐变背景必须搭配 background-color fallback
渐变失效时，用户看到的不是“透明”，而是父级背景色。若没设 background-color，可能暴露 body 白底或深色主题下文字不可读。
- Bootstrap 渐变类（如
bg-gradient-primary）内部不设background-color，仅靠background-image，所以务必手动加保底：bg-primary bg-gradient-primary - 手写渐变时，用
background: linear-gradient(...), #0d6efd（逗号分隔），而非只写background-image—— 这样即使渐变解析失败，background-color仍生效 - 深色模式下，检查
color是否同步调整，比如浅渐变配text-dark，深渐变配text-white
别把渐变背景塞进 .container 或 .row 里
这两个类自带 padding 和负 margin，且默认不是定位上下文。渐变背景一旦嵌套其中，高度计算受干扰，缩放时边缘错位明显。
- 正确结构：
<div class="hero-gradient min-vh-100 dvh-100"><div class="container">...</div></div>，样式全写在.hero-gradient上 - 若必须嵌套，给外层加
mx-n3 px-0抵消.row的负 margin 和.container的 padding - 检查祖先元素是否含
overflow: hidden—— 它会把渐变超出部分直接裁掉，看起来像“半截渐变”
最常被忽略的一点：渐变背景的容器必须是独立块级上下文，不能依赖 flex 子项的百分比高度；h-100 在 .col 上基本无效，除非它的父级 .row 已经有明确高度（比如 min-height: 500px 或 min-vh-100）。
