横屏渐变错位因100vh过小及cover裁切导致，应改用min-height:100vh加-webkit-fill-available，background-position设具体值，媒体查询需结合宽高与orientation，渐变方向适配横屏，文字加text-shadow提升可读性，避免闪烁需预设渐变并慎用!important。
横屏模式下渐变背景被裁切或错位
直接用 background-size: cover + background-position: center 在横屏（尤其是 iOS Safari 的「竖屏转横屏」瞬间）常导致渐变区域偏移、顶部/底部大面积留白，甚至整个渐变消失。这不是 CSS 写错了，而是浏览器在 orientation change 时对 vh 和 background-position 的重绘逻辑不一致。
根本原因是：横屏时视口宽度远大于高度，100vh 变得极小（比如 iPhone 15 Pro 横屏下仅约 430px），而 background-size: cover 优先保证「高度方向撑满」，结果横向大幅裁切，渐变起始点被切出可视区。
- 别用
height: 100vh做容器高度基准——横屏下它太小，渐变色带可能只占屏幕一窄条 - 改用
min-height: 100vh+min-height: -webkit-fill-available（iOS 专属兜底） -
background-position必须写成具体数值，比如background-position: 50% 30%，避免依赖「center center」在横屏下的模糊计算 - 如果渐变方向是
135deg，横屏时左上角起点容易被切掉，可临时改为45deg或to right保主体可见
如何用媒体查询精准捕获横屏状态
仅靠 @media (orientation: landscape) 不够——它在桌面浏览器缩放、平板分屏、甚至某些安卓折叠屏上会误触发。真实横屏需同时满足「宽 > 高」且「设备有明确 orientation API 支持」。
更稳的写法是组合断点与 orientation：
@media (min-width: 768px) and (orientation: landscape) {
.hero-section {
background-image: linear-gradient(45deg, #0d6efd, #6f42c1);
}
}
@media (max-width: 767.98px) and (orientation: landscape) {
.hero-section {
background-image: linear-gradient(to right, #0d6efd, #6f42c1);
min-height: 100vh;
}
}
- 桌面端横屏（如 Chrome 缩放窗口）不会命中
orientation: landscape，所以必须加min-width限定为真实设备 - 移动端小屏横屏（如手机）单独写一套规则，因为
768px断点在此场景下无意义 - 方向值统一用
to right或角度（如0deg），避开to top等 Safari 旧版本不认的写法
横屏下文字可读性突然崩坏
同一组渐变在竖屏看着正常，横屏后文字立刻发灰、边缘模糊——不是字体变了，而是横屏时视口比例改变，导致渐变中段（比如中间 50% 区域）恰好落在文字下方，而该区域颜色对比度不足。
- 不要只测竖屏的 WCAG 对比度，横屏下用浏览器 DevTools 的「Rendering」面板开启「Emulate CSS media feature: orientation=landscape」重新校验
- 给文字层加
text-shadow: 0 1px 2px rgba(0,0,0,0.3)，比单纯换text-white更抗横屏色带漂移 - 如果用了伪元素遮罩（如
::before半透明层），横屏时检查其height是否被100vh锁死而没撑满——应改用height: 100%+position: absolute父容器设min-height: 100vh - 深色模式下横屏，
@media (prefers-color-scheme: dark) and (orientation: landscape)必须单独写，不能复用竖屏的暗色渐变值
横屏切换瞬间渐变闪烁或回退到纯色
iOS Safari 和部分安卓 WebView 在 orientation change 瞬间会丢弃 background-image 并短暂回退到 background-color，造成明显闪烁。这不是加载问题，是浏览器渲染管线重排导致的样式重置。
- 避免在横屏规则里用
!important覆盖竖屏样式——权重突变会加剧重绘抖动 - 把渐变声明提前到基础样式块里，例如：
.hero-section { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); }，再用媒体查询仅修改方向或色值，而非整条替换 - 加
will-change: background-image（仅对支持的现代浏览器），提示渲染引擎提前准备背景图层 - 真要零闪烁，放弃 CSS 渐变，改用
<svg></svg>背景内联（background: url("data:image/svg+xml,...")），SVG 在 orientation change 时无重绘开销
