纯html的标签不支持多级放大，需css+js手动实现缩放逻辑，包括scale值管理、缩放中心控制、边界限制及手势兼容性。
纯 HTML 的 <img> 标签本身不支持多级放大，必须靠 CSS + JS 手动实现缩放逻辑——不是加个属性就能“点一下变大、再点一下更大”，而是要自己管理 scale 值、缩放中心、边界限制和手势兼容性。
modal 容器必须设 max-width 和 max-height 同时生效
只写 max-width: 90vw 或只写 max-height: 90vh 都会出问题：竖构图大图撑爆高度，横构图大图溢出宽度。两者必须共存，且作用在 modal 内部的 <img> 上，而不是外层遮罩。
-
<img>元素本身设width: auto; height: auto;，让浏览器按原始宽高比缩放 - 避免用
object-fit: contain：旧版 Safari 渲染异常，且配合transform: scale()时居中逻辑混乱 - modal 外层容器用
display: flex; align-items: center; justify-content: center;居中，但前提是body高度为100vh
wheel 缩放必须 preventDefault() 且用 delta 方向判断，不能直接当系数
滚轮事件默认会触发页面滚动，不阻止就变成“一边放大一边滚屏”，体验极差。而且 e.deltaY 在 Mac 触控板、Windows 鼠标、Linux 笔记本上步长差异极大，直接拿来乘缩放值会导致有的设备一滚就跳到 3x，有的滚十下才动 0.1x。
- 监听
wheel时第一行必须是e.preventDefault() - 用
e.deltaY 判断“向上滚动 → 放大”，<code>e.deltaY > 0判断“向下滚动 → 缩小” - 缩放系数建议锁死在
0.5 ~ 5区间：低于 0.5 图片太小不可辨，高于 5 渲染模糊、内存暴涨、iOS Safari 易白屏 - 每次更新
transform: scale()前，必须同步设置transform-origin: center，否则缩放中心偏移，图片“飞出视口”
移动端双指缩放得手写 touchstart/touchmove，别信 touch-action
touch-action: pinch-zoom 在 Chrome 上表现尚可，但在 iOS Safari 中对 <img> 元素基本无效；touch-action: manipulation 只优化轻点响应，不提供缩放能力。真正可控的方式是监听两指距离变化，手动算缩放比。
-
touchstart中记录两指初始坐标和欧氏距离initialDistance -
touchmove中实时计算当前距离currentDistance，缩放比 =currentDistance / initialDistance - 必须加
e.preventDefault()，否则 iOS 会拦截手势、安卓部分浏览器会触发页面缩放 - iOS Safari 模态层需加
-webkit-overflow-scrolling: touch，否则缩放后拖拽卡顿 - 安卓某些 WebView 对
img的touch-action支持不一致，稳妥做法是把图片包进<div class="modal-img-wrapper">，样式和事件绑在 wrapper 上 <h3>反复打开关闭后失效？大概率是资源没清理或 body overflow 没恢复</h3> <p>功能第一次跑通不等于稳定可用。用户连续点开 5 张图再关掉，第 6 次打不开，或者页面无法滚动，几乎全是这三件事漏了：</p> <ul> <li>每次关闭 modal 时，必须手动恢复 <code>document.body.style.overflow = ''（不是'auto'），否则页面卡死 - 图片加载失败时没 fallback，
onerror回调里应隐藏 loading 状态、显示占位符或报错提示 - 没清空上一次的
src或没重置transform，导致新图沿用旧缩放状态，首次显示就变形或偏移
这些不是边缘情况，是真实用户高频操作下的必现问题。缩放逻辑写完只是起点，资源生命周期管理才是上线前最后一道坎。
