全屏图片需用 transform: scale() 配合 object-fit: contain 居中缩放，禁用 width/height 过渡；safari 不支持 img:fullscreen，须用 requestfullscreen() 和 document.fullscreenelement 判断；移动端需权衡 touch-action 以避免点击延迟或手势冲突。
点击图片触发全屏时，object-fit 和 transform 必须协同控制缩放行为
纯靠 width: 100vw; height: 100vh 拉伸会失真，必须保留原始宽高比。关键不是“填满”，而是“居中缩放”。用 transform: scale() 配合 transform-origin: center 才能避免边缘撕裂或抖动。
实操建议：
- 给图片容器设
overflow: hidden，防止缩放后内容溢出干扰动画 - 全屏态下显式设置
object-fit: contain（而非默认的fill），确保等比缩放 - 过渡属性只写
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)—— 这个贝塞尔曲线比ease-out更自然，收尾不生硬 - 别对
width/height做过渡，浏览器重排开销大，且在不同 DPR 设备上易出现像素级跳变
:fullscreen 伪类在 Safari 中不生效？得用 document.fullscreenElement + 类名切换
Safari 目前仍不支持图片元素直接触发 :fullscreen 伪类（哪怕加了 allowfullscreen）。必须手动调用 element.requestFullscreen()，再通过监听 fullscreenchange 事件来切 CSS 类。
常见错误现象：
- 写了
img:fullscreen { ... }却完全没反应 —— 因为 Safari 根本不识别这个选择器 - 用
document.webkitFullscreenElement判断但未兼容document.fullscreenElement，导致 Chrome/Firefox 下失效 - 未在退出全屏后清除
transform，导致后续点击同一张图缩放起点错乱
正确做法是统一用 document.fullscreenElement === imgEl 判断，并在进入/退出时分别添加/移除 is-fullscreen 类。
移动端双击放大与点击全屏冲突？禁用 touch-action 要精准控制
iOS Safari 默认对图片启用了 touch-action: manipulation，导致点击事件延迟约 300ms，且可能拦截 click 触发全屏逻辑。但直接设 touch-action: none 又会禁掉所有手势（包括双指缩放）。
使用场景权衡：
- 如果产品明确只要“点一下全屏”，就设
touch-action: manipulation（仅允许点击和滚动），再用preventDefault()拦截touchstart防止延迟 - 如果需保留双指缩放，就得放弃纯 CSS 方案，改用
pointer-events: none在图片上盖一层透明按钮层，把点击委托给该层 —— 这样touch-action不影响原图手势 - Android Chrome 对
touch-action兼容性较好，但旧版 WebView 仍可能忽略，建议加-ms-touch-action: manipulation兜底
全屏退出后图片位置偏移？scroll-behavior: smooth 不是万能解
退出全屏时，页面若原本有滚动，浏览器常自动回滚到图片原始位置，但这个回滚和 CSS 动画不同步，造成视觉撕裂。单纯加 scroll-behavior: smooth 无法对齐动画节奏。
性能与兼容性影响：
- Chrome 120+ 支持
scrollIntoView({ behavior: 'smooth', block: 'center' })，但 Safari 仍不支持block: 'center'，只能退化为auto - 更稳的做法是在退出全屏前，用
getBoundingClientRect()记录图片视口坐标，退出后再用window.scrollTo()精确还原，避开浏览器自动滚动 - 注意：若图片在
position: sticky容器内，getBoundingClientRect()返回的是相对视口坐标，需额外计算父容器偏移
最易被忽略的是：全屏 API 的 fullscreenchange 事件触发时机在 DOM 更新之后、但渲染帧之前，所以任何基于 offsetTop 或 getComputedStyle 的读取都必须放在 requestAnimationFrame 里，否则拿到的是旧值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
