能用原生HTML+JavaScript实现图片全屏查看，需将图片包裹在div容器中调用requestFullscreen()，配合CSS居中缩放，并监听fullscreenchange事件恢复状态；但iOS Safari不支持非video元素全屏，需降级为CSS模态框方案。
直接用原生 HTML + JavaScript 就能实现点击图片全屏查看，不需要引入任何第三方库。核心是利用 Element.requestFullscreen() API，配合一个简单的遮罩层和缩放逻辑——但要注意浏览器兼容性、图片宽高比处理，以及退出全屏后的状态恢复。
如何用 requestFullscreen() 触发图片全屏
不能直接对 <img> 元素调用 requestFullscreen()（部分浏览器不支持），稳妥做法是把图片包在一个 <div> 容器里，对这个容器调用全屏方法。
- 给图片外层加一个带唯一 ID 的
<div class="fullscreen-container"> - 绑定点击事件，调用
container.requestFullscreen() - 必须在用户手势（如
click）中触发，否则会被浏览器静默拒绝 - 注意：Safari 需要加
webkitEnterFullscreen前缀，但仅适用于<video>；图片全屏统一走标准requestFullscreen
为什么需要手动控制图片缩放和居中
全屏后图片默认不会自适应视口，可能被裁剪、拉伸或偏左上角。CSS 的 object-fit: contain 和 margin: auto 配合绝对定位才能可靠居中。
- 全屏容器设为
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 图片设
max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; margin: auto; - 避免用
width: 100%; height: 100%，会强制拉伸失真 - 如果图片极宽（如全景图），可考虑加
cursor: zoom-in和鼠标滚轮缩放逻辑，但这已超出基础需求
如何监听退出全屏并还原界面
用户按 ESC 或调用 document.exitFullscreen() 后，页面不会自动恢复滚动、焦点或样式，必须手动处理。
立即学习“前端免费学习笔记（深入）”；
- 监听
document.addEventListener('fullscreenchange', handler)，而非webkitfullscreenchange等旧事件（现代浏览器统一支持fullscreenchange） - 在回调中检查
document.fullscreenElement === null来判断是否已退出 - 退出后记得恢复
body的overflow（如果之前设为hidden）、移除临时 class、重置图片父容器的定位 - 别忘了清理事件监听器，尤其在单页应用中重复挂载时容易内存泄漏
最易被忽略的是移动端 Safari：它不支持对非 <video> 元素调用全屏 API，所以 iOS 用户实际看到的是“放大查看”而非系统级全屏。如果必须支持 iOS，得 fallback 到模态框 + CSS 缩放方案，而不是依赖 requestFullscreen。
