双击放大图片需用event.target获取被点击的img元素，结合transform-origin动态设缩放中心点，并禁用浏览器默认双击缩放；移动端应模拟双击，响应式图片须提供2x源以避免模糊。

双击放大图片时，event.target 和 event.currentTarget 容易混淆

很多实现卡在“双击后图片没反应”或“缩放错位”，根本原因是监听对象和实际操作元素不一致。比如给 <div class="img-container"> 绑双击事件，但实际要缩放的是里面的 <code><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 双击事件根本收不到。这不是代码写错了，是浏览器阻止了。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

实操建议：

• 在 加 <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 和触屏得走两套事件路径。