全屏轮播需用 position: fixed/absolute + 100vw/100vh 铺满视口，子元素设 height: 100%，图片用 object-fit: cover 防变形；注意 overflow: hidden 裁剪、iOS vh 跳变、touch-action 手势冲突及自动播放交互逻辑。
轮播图容器必须脱离文档流并覆盖视口
默认 .carousel 是块级元素，高度由内容撑开，不可能全屏。关键不是调大高度，而是用 position: fixed 或 position: absolute 配合 top: 0; left: 0; width: 100vw; height: 100vh; 强制铺满整个视口。
注意：如果父容器有 overflow: hidden（比如某些布局 wrapper），会导致轮播图被裁剪——必须检查并移除或重置该样式。
-
height: 100vh在 iOS Safari 中可能因地址栏缩放导致高度跳变，建议加min-height: 100vh并监听resize事件动态修正 - 使用
position: fixed时，轮播图会脱离文档流，后续内容需手动留出空间（例如在轮播后加一个margin-top: 100vh的占位元素） - 不要只改
.carousel，要同时设置其直接子元素.carousel-inner和每个.carousel-item为height: 100%，否则图片会被压缩或留白
图片如何真正撑满且不拉伸变形
Bootstrap 默认的 .carousel-item img 是响应式图片（max-width: 100%; height: auto），这在全屏下必然留白或比例错乱。必须覆盖默认行为。
推荐用 object-fit: cover + object-position: center，让图片等比缩放并居中裁剪填满容器。
- 给轮播图里的
style="max-width:90%"，不能只设width: 100% - 避免用背景图方式（如
background-image）实现——那样就无法利用 Bootstrap 的data-bs-interval、自动播放控制等原生能力 - 如果图片分辨率低，全屏后会模糊，需确保原始图宽度 ≥ 设备最大视口宽度（例如 ≥ 1920px），否则再怎么调 CSS 也无济于事
移动端触摸滑动失效或卡顿
全屏轮播在手机上常出现手势无效、切换延迟、甚至页面整体被拖动的问题，根源是浏览器对 touch-action 的默认处理和 CSS 层叠顺序冲突。
- 给
.carousel添加touch-action: pan-y pinch-zoom;（禁用横向拖拽，保留纵向滚动和缩放） - 确保轮播图层级足够高：
z-index: 1000或更高，避免被其他固定定位元素（如导航栏）遮挡手势区域 - 禁用
body的touch-action: none（某些 UI 库会全局设置），否则整个页面手势都被拦截 - 如果用了
position: fixed，iOS 上可能触发“弹性滚动”，导致轮播切换后页面回弹——可加overscroll-behavior: contain到body
自动播放与用户交互的冲突处理
全屏轮播一旦开始自动播放，用户点击指示器或左右箭头后，若未暂停，容易造成误操作或体验割裂。
- 初始化时显式关闭自动播放：
data-bs-ride="false"，改用 JS 手动控制：const carousel = new bootstrap.Carousel(element, { interval: 5000, pause: 'hover' }); - 用户点击任意控制元素（箭头、指示点）后，应立即调用
carousel.pause()，避免“刚点完就切走” - 若需恢复自动播放，不要依赖默认的
hover暂停逻辑——全屏场景下鼠标悬停意义弱，建议改为“离开焦点 3 秒后恢复”或完全取消自动播放
全屏轮播真正的难点不在尺寸控制，而在视口适配、手势优先级和交互节奏的平衡。尤其在低端安卓机或旧版 iOS 上，vh 计算偏差、transform 渲染性能、touch-action 兼容性都可能单独引发问题，最好在目标机型上实测触控响应和切换帧率。
