全屏轮播不必用.carousel-fade；应使用默认滑动过渡，设.carousel高度为100vh，.carousel-item设height:100%，图片用object-fit:cover并提供多分辨率srcset，禁用will-change滥用，文字用绝对定位居中适配。
全屏轮播必须用 .carousel-fade 吗？
不是。Bootstrap 默认的 .carousel 本身不强制 fade 效果，但实现「全屏+响应式」时，.carousel-fade 反而容易出问题——它依赖 opacity 过渡，叠加在 position: absolute 的图片上时，常出现白屏闪动或 z-index 错乱。真正关键的是控制容器高度和图片渲染方式。
实操建议：
- 去掉
.carousel-fade，用默认的滑动过渡（更稳定） - 给
.carousel容器设height: 100vh，而非靠图片自身撑高 - 每张
.carousel-item内部用<img>+object-fit: cover，避免拉伸变形 - 必须为
.carousel-item显式设置height: 100%，否则在 Safari 或某些安卓 WebView 中会塌陷
.carousel-item img 怎么写才不模糊、不变形？
直接写 <img src="..." class="d-block w-100"> 是常见错误：它让图片宽度 100%、高度自适应，结果在竖屏设备上严重压缩，横屏又留黑边。
正确做法：
- 移除
w-100，改用class="d-block h-100 w-100"+style="object-fit: cover;" - 图片源建议提供至少两档分辨率（如
srcset），例如：<img src="bg-800.jpg" srcset="bg-800.jpg 800w, bg-1600.jpg 1600w" sizes="(max-width: 768px) 800px, 1600px">
- 不要用背景图（
background-image）替代<img>—— 语义丢失、无法懒加载、SEO 不友好
移动端轮播卡顿或自动播放失效怎么办？
典型现象：iOS 上滑动生涩、Android Chrome 自动播放停在第二张、低配机频繁掉帧。根本原因不是 Bootstrap 版本，而是浏览器对 transform 和 will-change 的处理差异。
可立即生效的修复项：
- 给
.carousel-inner加style="will-change: transform;"（仅在有动画时启用，避免常驻消耗） - 禁用非必要过渡：在 JS 初始化时传入
{ interval: 5000, pause: 'hover' }，不要设ride: 'carousel'同时开启自动播放和触摸拖拽 - 移除所有自定义 CSS 动画（比如
@keyframes slideIn），Bootstrap 5 的transition已足够 - 如果用 WebP 图片，确保降级到 JPEG（
<picture>+<source type="image/webp">），部分旧版 WebView 不支持 WebP 解码
如何让轮播内容（标题/按钮）在不同屏幕下始终居中可见？
很多人把文字塞进 .carousel-caption 就完事，结果小屏上文字被截断、大屏上离顶部太远。这不是 margin 调整能解决的。
核心逻辑是分层定位：
-
.carousel-item设为position: relative（默认已是） -
.carousel-caption改用position: absolute; top: 50%; transform: translateY(-50%)，而不是默认的bottom: 0 - 文字容器加
max-width: 90vw和padding: 0 1rem，防止超宽设备上文字过散 - 关键：用
@media (max-width: 576px)单独调小font-size和line-height，别指望vw单位自动适配可读性
最易被忽略的一点：轮播容器外层不能有 overflow: hidden（比如父级 .container-fluid 被误加了该样式），否则在 iOS 滚动时会裁剪过渡中的卡片。
