双击放大图片需用event.target获取被点击的img元素，结合transform-origin动态设缩放中心点，并禁用浏览器默认双击缩放；移动端应模拟双击，响应式图片须提供2x源以避免模糊。
双击放大图片时，event.target 和 event.currentTarget 容易混淆
很多实现卡在“双击后图片没反应”或“缩放错位”，根本原因是监听对象和实际操作元素不一致。比如给 <div class="img-container"> 绑双击事件，但实际要缩放的是里面的 <img> 元素——此时必须用 event.target 获取被双击的图片，不能直接用 this 或容器节点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终用
event.target获取触发事件的<img>元素，哪怕事件委托到父级 - 检查
event.target.tagName === 'IMG'，避免误处理文字、链接等子元素 - 放大前先清除已有
transform，否则叠加缩放会失控
transform: scale() 配合 transform-origin 控制缩放中心点
单纯用 scale(2) 会让图片左上角固定、向右下延伸，视觉上像“偏移”，用户会觉得“没对准手指点的位置”。必须结合 transform-origin 动态设为点击坐标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
getBoundingClientRect()算出图片相对于视口的位置，再减去鼠标 clientX/Y，换算成相对图片自身的百分比坐标 - 设置
style.transformOrigin = `${xPercent}% ${yPercent}%`，再执行scale(2) - 单击缩小只需还原
transform和transform-origin到默认值（如'center center'） - 别用
width/height动画缩放——会破坏响应式布局，且无法平滑复位
移动端双击缩放常被浏览器默认行为拦截
iOS Safari 和部分安卓浏览器默认把双击当“页面缩放”，会直接 zoom 整页，你的 JS 双击事件根本收不到。这不是代码写错了，是浏览器阻止了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>加<meta name="viewport" content="user-scalable=no">（慎用，影响整体体验） - 更稳妥的是：监听
touchstart+touchend手动计算时间差模拟双击，绕过默认行为 - 务必加
event.preventDefault()在双击回调里，尤其对touchend - PC 和移动端逻辑最好分离：PC 用
dblclick，移动端用自定义双击检测
响应式图片下 srcset 和 sizes 与缩放状态冲突
当图片已按 srcset 加载了小图（如 400w），双击放大后，像素拉伸会模糊。但你不能在缩放时临时改 src——因为缩放是瞬时 CSS 变化，而换图是异步加载，时机难控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 缩放前检查
img.naturalWidth，如果远小于当前视口宽度，说明可能加载了低分辨率资源 - 优先用
srcset提供至少 2x 物理像素的图源（如image.jpg 2x），让浏览器自动选高分图 - 不要在缩放动画中动态切换
src；如需高清细节，可另起一个隐藏<img>预加载大图，缩放时切换显示 - 缩放后若需拖拽查看局部，得配合
overflow: hidden和position: relative/absolute布局，纯scale不够
transform-origin 的坐标换算、移动端双击劫持、以及响应式图片资源匹配这三处最容易反复调试。别指望一套代码通吃所有设备，PC 和触屏得走两套事件路径。 
