全屏轮播需设死 viewport 和 body 样式，加 meta 禁缩放，用 object-fit: cover 铺满图片，禁用 loading="lazy"，手动实现触摸滑动并节流状态更新。
全屏轮播必须设死 viewport 和 body 样式
不加这一步，100vh 会失效，尤其在 iOS Safari 或 Chrome 移动版里，地址栏收放会导致高度跳变。常见错误是只写 height: 100vh 却忽略 html, body { height: 100%; margin: 0; padding: 0; }，结果轮播容器撑不满视口。
还要强制关闭缩放干扰：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。虽然牺牲了双指缩放，但全屏轮播本就不该被缩放打断体验。
- 所有图片必须带
width和height属性（或 CSS 固定尺寸），否则object-fit: cover无法稳定裁切 - 别用
min-height: 100vh—— 它会让容器随内容增长，破坏“全屏”语义 - 移动端需监听
resize事件重设高度（仅当页面有动态 toolbar 时才必要，多数情况加viewport就够）
图片铺满全屏的关键是 object-fit 而非 width/height
直接写 width: 100%; height: 100vh; 会让图片严重变形。正确做法是给 <img> 加 style="max-width:90%"，让浏览器自动裁剪居中填充。
注意：IE 不支持 object-fit，如果必须兼容，得用 background-image + div 替代 img 标签，但会丢失 alt 和懒加载能力。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
object-fit: cover保持宽高比、裁剪溢出部分，适合封面图 -
object-fit: contain完整显示但留黑边，适合产品图展示 - 不要给父容器设
overflow: hidden来强行裁切 —— 这会截断阴影、过渡动画边缘
自动轮播在全屏下更容易卡顿，得关掉 transition 或换方案
全屏图片体积大，CSS opacity 或 transform 动画在低端机上容易掉帧。实测发现，单纯切换 display: none / block 比加 transition 更稳，尤其在首次加载后。
如果非要动画，用 transform: translateZ(0) 强制 GPU 加速，但得加在轮播容器上，不是每张图都加 —— 否则触发过多图层合成，内存飙升。
- 避免在
setInterval里反复读取offsetHeight或调用getBoundingClientRect() - 图片加载完成前先隐藏轮播容器（
opacity: 0），加载完再opacity: 1，防止白屏闪动 - 用
loading="lazy"会破坏全屏首屏体验，全屏轮播图一律设loading="eager"
触摸滑动必须手动实现，不能依赖 CSS @keyframes
CSS 动画轮播无法响应 touchmove，全屏场景下用户本能想滑动，只靠按钮或自动播会降低可用性。得用 touchstart / touchmove / touchend 手动记录位移，再调用 showImage(index)。
关键点：滑动阈值设为 50px 左右，太小易误触，太大难响应；松手后根据速度和剩余距离决定是否翻页，而不是只看位移量。
- 别绑定在
document上 —— 多个轮播时事件冲突，应绑定到具体.carousel容器 - 移动端
click有 300ms 延迟，所有按钮必须加touchstart事件替代 - 滑动时禁用
setInterval，松手后再恢复，否则手势和自动播打架
requestIdleCallback 做节流更新，别一上来就堆 DOM 操作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
