原生是最轻量可靠的现代方案，chrome 97+、firefox 99+、safari 15.4+原生支持，通过showmodal()显示、点击遮罩或按esc关闭，配合max-width: 90vw; max-height: 80vh; object-fit: contain实现安全居中适配，无需js库。
点击图片直接放大，用原生 JavaScript 最简实现
不需要任何第三方库，click 事件 + dialog 元素就能搞定。现代浏览器（Chrome 97+、Firefox 99+、Safari 15.4+）已原生支持 <dialog></dialog>，它自带模态层、焦点管理与 ESC 关闭逻辑，比手写遮罩层更可靠。
常见错误是用 display: none 控制图层显隐——这会让屏幕阅读器丢失内容，且无法响应 ESC 键。正确做法是用 dialog.showModal() 和 dialog.close()。
- 给图片加
onclick="showBig(this.src)"，传入原图地址 - 页面底部放一个
<dialog id="zoom-dialog"><img id="zoom-img"></dialog> - JS 中调用
document.getElementById('zoom-dialog').showModal()，再赋值src - 监听
click事件关闭：点图片外侧区域或按 ESC 自动关闭
图片放大后如何居中并适配不同尺寸
放大图不能直接填满视口，否则小图会拉伸失真，大图可能溢出。关键在 CSS 的 max-width 和 max-height 配合 object-fit: contain。
不要用 width: 100vw; height: 100vh —— 这会强制拉伸，且忽略滚动条宽度，导致水平滚动。真正安全的写法是：
dialog::backdrop {
background: rgba(0,0,0,0.8);
}
#zoom-dialog img {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
margin: 2vmax;
display: block;
}
注意：vmax 比 px 或 % 更稳——它取视口宽高较大者，避免横屏手机下图片过小。
移动端双击放大失效？别用 touchstart 模拟双击
移动端 Safari/Chrome 对双击缩放有严格限制，禁用 user-scalable=no 才能触发原生双击，但多数网页已禁用。硬写双击检测（touchstart + 时间间隔）容易误触、延迟高，还破坏滑动体验。
更实际的方案是：保留单击放大，同时为触摸设备添加「长按预览」提示：
- 给图片加
ontouchstart="this.dataset.touched='1'" - CSS 中加
img[data-touched] { opacity: 0.9; }提供反馈 - 不拦截默认行为，让系统长按菜单（保存/分享）仍可用
- 放弃模拟双击，专注把单击放大做顺滑——加
transition: transform 0.2s ease在 dialog 显示时生效
IE11 或旧版 Edge 怎么兼容
<dialog></dialog> 在 IE 完全不支持，Edge ≤ 18 也不行。如果必须兼容，就不用 dialog，改用 div + 手动控制 aria-modal="true" 和焦点锁。
重点不是“怎么让旧浏览器看起来一样”，而是“怎么不让它们崩溃”：
- 用
if ('showModal' in HTMLDialogElement.prototype)检测支持性 - 不支持时 fallback 到
div，但移除所有dialog-only 的 JS 调用（如.close()） - 避免用
inert属性——IE 不识别，会导致背景可点击；改用pointer-events: none+ class 切换 - 图片加载失败时，
onerror里要主动调用关闭逻辑，否则模态层卡住
真正麻烦的不是代码量，是旧浏览器里 focus() 行为不一致、scrollIntoView() 偏移错乱——建议只保核心功能：点开、显示、点外关闭。其余交互降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
