能用原生html+javascript实现点击图片全屏查看，需将图片包裹在div容器中调用requestfullscreen()，配合css居中缩放并监听fullscreenchange事件恢复状态；但ios safari不支持非video元素全屏，需降级为css模态框方案。
点击图片触发全屏展示，用 requestFullscreen() 最直接
现代浏览器原生支持全屏 API，不用引入任何库就能让图片撑满整个屏幕。关键不是“放大图片”，而是把图片所在的 DOM 元素（比如 <img> 或包裹它的 <div>）调用 <code>requestFullscreen() 方法。
注意：该方法必须由用户手势（如 click）触发，不能在异步回调或定时器里直接调；否则浏览器会静默拒绝，控制台报错 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
- 推荐包裹一层
<div class="fullscreen-trigger">，再把 <code><img>放进去——这样全屏时可自由加关闭按钮、缩放控件等 - 不要对
<img>直接调用requestFullscreen()，部分浏览器（如 Safari）对替换元素支持不稳定 - 调用前检查兼容性：
if (el.requestFullscreen) el.requestFullscreen();，也可用el.webkitRequestFullscreen等前缀兜底（但 Chrome 90+、Firefox 64+、Edge 79+ 已统一标准） - 用
document.addEventListener('fullscreenchange', () => { ... })，内部通过document.fullscreenElement判断当前是否处于全屏（为null表示已退出） -
document.exitFullscreen()本身返回 Promise，可链式处理失败（如用户主动拒绝权限），但多数场景只需忽略 reject - 退出后建议手动 focus 回原图片或触发元素，避免键盘操作失焦
- 避免用
max-width/max-height，它在全屏容器里失效；必须用100%或100vh/vw - Safari 对
object-fit在全屏下的渲染有延迟，可加transform: translateZ(0)强制硬件加速 - 如果图片超大（如 5000×3000），全屏后首次渲染可能卡顿，建议提前加载并
display: none隐藏，全屏时再display: block -
<dialog></dialog>在 Safari 15.4+ 支持良好，旧版可用display: block+ 手动管理 backdrop - 务必加
touch-action: manipulation防止双击缩放干扰 - 不要依赖
screen.orientation判断横竖屏——iOS Safari 返回值常不准，改用window.matchMedia('(orientation: landscape)')
退出全屏要监听 fullscreenchange 事件，别只靠按钮
用户可能按 ESC 键退出，也可能点地址栏、切 Tab —— 这些都不会触发你写的“关闭按钮”点击逻辑。必须监听全局的 document 上的 fullscreenchange 事件来同步 UI 状态。
常见错误是只在按钮里写 document.exitFullscreen()，却没处理退出后的状态重置（比如按钮文字还显示“退出全屏”，实际已退出）。
全屏后图片拉伸变形？用 CSS 控制 object-fit 和尺寸
全屏容器宽高是视口尺寸，但原始图片比例往往不匹配。直接设 width: 100%; height: 100% 会导致严重拉伸。核心是用 object-fit 配合容器约束。
典型布局：外层 <div class="fs-container"> 设为 <code>width: 100vw; height: 100vh;，内层 <img> 设 width: 100%; height: 100%; object-fit: contain;（保持比例、留黑边）或 cover（填满、可能裁剪）。
移动端 Safari 不支持 requestFullscreen()？用 <dialog></dialog> 降级
iOS Safari 从始至终没实现 Element.prototype.requestFullscreen，连 webkit 前缀都不认。强行调用无反应，也不报错，容易误判成功。
可靠方案是检测 document.fullscreenEnabled === false（注意不是 undefined）后，改用 <dialog></dialog> + CSS 模拟全屏：设 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;，再用 object-fit 控制图片。
