现代浏览器可用实现点击放大，需用.showmodal()触发模态、data-fullsrc存大图、viewport禁缩放以支持双指手势，并注意safari闪屏、降级兼容及缩放性能优化。
用 <dialog></dialog> 搭配 data-fullsrc 实现现代浏览器的点击放大
Chrome 98+、Firefox 97+、Safari 15.4+ 支持原生 <dialog></dialog>，它自带模态层、ESC 关闭、焦点锁定，比手写 div + z-index 更可靠。但必须注意：open 属性不能直接让弹窗模态，得调用 .showModal() 方法；否则点击背景或按 ESC 都不会关闭。
缩略图别直接把 src 塞进弹窗——高清屏下会模糊。给图片加 data-fullsrc 存大图地址：
@@##@@
JS 中取值并赋给弹窗内 <img class="zoomable" src="cat-thumb.jpg" data-fullsrc="cat-2x.jpg" alt="猫">，再调用 .showModal()：
document.querySelectorAll('.zoomable').forEach(img => {
img.addEventListener('click', () => {
const dialog = document.getElementById('img-dialog');
const dialogImg = document.getElementById('dialog-img');
dialogImg.src = img.dataset.fullsrc || img.src;
dialogImg.alt = img.alt;
dialog.showModal();
});
});
- 务必在
showModal()前设置好src，否则 Safari 可能闪白屏 - 为
dialog::backdrop显式设background: rgba(0,0,0,.8)，否则遮罩不可见 - 弹窗内图片用
max-width: 90vw; max-height: 90vh; object-fit: contain;防止拉伸或溢出
移动端双指缩放必须禁用 viewport 缩放
不加 user-scalable=no，iOS 和 Android 浏览器会拦截双指事件，你的 touchstart/touchmove 根本收不到第二根手指的数据——这不是 JS 写错了，是浏览器先截胡了。
在 中强制关闭原生缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
然后监听双指距离变化算缩放比，用中心点位移算平移偏移：
- 初始化时记下两指欧氏距离
startDistance = Math.hypot(dx, dy)和中点坐标startCenter - 每次
touchmove里重新算当前距离和中点，缩放 = 当前距离 / 初始距离 - 用
transform: translate(x, y) scale(s) translate(-x, -y)实现以手指为中心缩放（避免用transform-origin动态改，兼容性差） - 必须在
touchmove中调event.preventDefault()，否则页面会跟着滚动
老浏览器降级方案：position: fixed + 手动 ESC 监听
Safari 15.3 或 IE11 必须 fallback。核心不是“怎么模拟”，而是“怎么不让用户误操作”：
- 弹窗容器加
tabindex="-1"，打开后立刻.focus()，否则键盘用户按不了 ESC - 关闭逻辑要严格判断
event.target === dialogEl，否则点图片本身也会关掉弹窗 - 遮罩层必须设
inert（现代）或手动遍历子元素加pointer-events: none，不然按钮仍可点击 - 图片尺寸控制仍用
max-width: 90vw; max-height: 90vh;，别用width: 100%，否则小图会被强行撑大
srcset 和 sizes 在弹窗里容易失效
缩略图用 srcset 是好习惯，但弹窗里直接复用缩略图的 src，会导致高 DPR 设备（如 iPhone）加载低分辨率图，看着发虚。
正确做法是：大图 URL 单独存，比如 data-fullsrc 或 data-srcset：
@@##@@
弹窗中只读 data-fullsrc，不碰 srcset —— 因为 <img> 在 fixed 层或 <dialog></dialog> 里，其容器尺寸和上下文已变，sizes 不再生效，硬塞反而可能加载错档位。
真正复杂的是手势缩放时的边界限制和性能：缩放和平移必须用 requestAnimationFrame 节流，否则快速拖拽会卡顿；图像边界检测得基于缩放后的实际尺寸，不是 CSS 像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
