放大镜层必须用position: absolute并设父容器position: relative，避免错位；坐标计算需用getboundingclientrect()并减去scroll/transform偏移；高清屏下canvas要按devicepixelratio缩放并提供2x图。
放大镜层必须用 position: absolute 脱离文档流
否则图片容器一滚动或重排版，放大镜就错位甚至消失。常见错误是直接套在 <img> 外面加 position: relative，但没给父容器设 position: relative，导致 absolute 找不到定位锚点，飘到视口左上角。
实操建议：
- 商品图外层容器（比如
<div class="product-image">）必须设 <code>position: relative - 放大镜预览层（
<div class="magnifier-lens">）用 <code>position: absolute，且 top/left 基于该容器计算 - 避免用
transform: scale()模拟放大——它会模糊图片、不支持高清屏缩放，也难对齐坐标 - 如果用 Canvas 渲染放大区域，注意
canvas.width和canvas.style.width要分开设，否则拉伸失真 - 用
element.getBoundingClientRect()动态取图片左上角在视口中的真实位置，再减去clientX/Y - 若图片容器有
border或padding，记得从getBoundingClientRect()结果里减掉对应值 - 不要依赖
offsetLeft/offsetTop——它们不包含transform偏移，也不响应滚动 - 移动端要监听
touchmove并用touches[0].clientX，别只写 mouse 事件 - 放大镜层的 Canvas 需按比例设
canvas.width = width * dpr，再用canvas.style.width = width + "px" - 原图最好提供 2x 版本（如
image@2x.jpg），用srcset或 JS 判断dpr > 1后切换 - CSS 中避免用
background-size: contain做放大图填充——它会插值拉伸，改用background-size: auto+ 显式宽高控制 - 测试时务必在真机或 Chrome 的 Device Toolbar 里开 “High DPR” 模式，桌面模拟器常不准
- 每个图片 hover 时，先调用
ctx.clearRect(0, 0, canvas.width, canvas.height) - 用
data-magnifier-target属性标记当前生效的图片，离开时清空该属性，进入新图时校验匹配 - 监听器统一用
addEventListener+ 变量存引用，切换前先removeEventListener - 避免用全局变量存 canvas 或 image 对象——不同图片尺寸不同，复用前必须重设
canvas.width/height和ctx.imageSmoothingEnabled = false
鼠标移动时的坐标换算容易漏掉 scroll 与 transform 偏移
用户滚动页面后，event.clientX / clientY 还是视口坐标，但图片可能已随容器被 transform: translateY() 或滚动出视口，直接套用会导致放大镜“追不上”鼠标。
实操建议：
高清屏下图片模糊是因为没适配 devicePixelRatio
在 Retina 屏上，<img src="a.jpg"> 渲染时会被浏览器自动放大 2x，但放大镜层若直接用 CSS width/height 控制尺寸，Canvas 绘图又没乘 window.devicePixelRatio，结果就是锯齿明显、细节糊成一片。
实操建议：
多个图片共用一个放大镜层时，hover 切换容易残留旧状态
商品页常有主图+缩略图切换，但放大镜层若没及时销毁或重置，会出现：缩略图 A 的放大区域还卡在缩略图 B 上、上次的 canvas.drawImage() 源图没清空、甚至监听器重复绑定导致响应两次。
实操建议：
事情说清了就结束。最麻烦的从来不是画个圆框，而是坐标对得准、DPR 跟得上、切换时不串图——这三处一松劲，用户一眼就看出是“假放大”。
