手机上渐变“看不见”主因是渲染层遮挡或兼容性问题：子元素背景色覆盖、旧版WebView不支持方向关键词、Sass禁用渐变等；可靠方案是小屏设纯色背景，大屏媒体查询注入角度渐变。
Bootstrap 的 bg-gradient-* 类在手机尺寸上基本不可控——它不响应断点，也不区分设备类型，写上去就全局生效，小屏看着“没效果”往往是因为被子元素盖住或颜色对比度崩了，而不是渐变没加载。
为什么手机上渐变经常“看不见”
不是代码错了，是渲染层被遮挡或降级失效：
-
bg-gradient-primary必须和bg-primary一起用才生效，但bg-primary设的是background-color，会压在渐变下方；小屏时若没显式清除，你看到的其实是纯色 - 常见容器如
.card、.container默认带background-color: #fff，直接盖掉底层渐变，检查 computed styles 会发现background-image是none - 部分安卓 WebView 和 iOS 12 以下 Safari 不支持
to right这类方向关键词，只认135deg，写错就退成纯色 - 如果项目 Sass 中设了
$enable-gradients: false，所有渐变类静默失效，控制台零报错
怎么让渐变在手机上可靠回退为纯色
别依赖工具类组合，用 CSS 层叠控制 fallback 才靠谱：
- 基础态（小屏）必须显式写
background-color，比如.section { background-color: #f8f9fa; } - 只在目标断点用
@media (min-width: 768px)注入background-image: linear-gradient()，避免用background简写，否则清掉上面的background-color - 方向统一用角度，例如
linear-gradient(135deg, #0d6efd, #6f42c1)，比to bottom right兼容性高 - 颜色至少两个，单色值（如
linear-gradient(#0d6efd, #0d6efd)）仍是纯色，不是渐变
按钮上的渐变在手机点击时为啥没反馈
不是样式问题，是移动端渲染机制限制：
-
.btn类用!important锁死background-color，bg-gradient-*根本不生效；必须手动覆盖：background-color: transparent !important+background-image: linear-gradient() !important - iOS Safari 对
:active状态下的background-image渲染有缺陷，不写.btn-gradient:active就会退成透明底 - 加
-webkit-tap-highlight-color: transparent防止点击时半透明蒙层盖住渐变 - 别用
transition: background做渐变动画——Chrome/Firefox 不支持渐变插值，只会跳变
深色模式 + 手机小屏 = 文字可读性最容易崩
同一组渐变在 iPhone 竖屏下可能刚好够对比度，横屏或换到 Android 就看不清，这不是 Bug，是物理限制：
- 浅色渐变（如
#e9ecef → #dee2e6）配text-dark在小屏字体缩小时立刻糊成一片 - 深色渐变（如
#495057 → #343a40）配text-white在 OLED 屏幕上可能因亮度衰减导致文字边缘发灰 - 必须单独加
@media (prefers-color-scheme: dark)重写渐变值，不能复用亮色系变量 - 真正难调的不是渐变本身，是它和
font-size、line-height、环境光感知的耦合关系——上线前务必真机横竖屏切换测试
