响应式图片局部放大镜必须用JavaScript动态计算坐标映射并使用px单位的background-position，因百分比在缩放和响应式布局中失准；需通过getBoundingClientRect和样式计算获取准确鼠标坐标，处理touch事件防滚动，并三重校验高清图加载完成后再初始化。
响应式图片局部放大镜效果不能靠纯 CSS 实现，必须用 JavaScript 动态计算坐标映射，并配合 background-position 移动高清图“视口”——否则在不同屏幕或缩放比例下，镜片会错位、跳动甚至完全失效。
为什么 background-position 必须用 px 单位而非百分比
写死 background-position: 50% 50% 只能让放大图固定居中；真实需求是鼠标指哪，镜片就放大哪。浏览器不自动把 clientX 映射到背景图像素，得手动算偏移量。百分比在 background-size 不是 cover 或容器尺寸不稳定时会失准，尤其在响应式布局里，rect.width 每次都变，百分比值就飘。
正确做法是统一用 px：background-size 设为大图原始尺寸（如 1200px 900px），再用 background-position: -x * scale + "px" + " " + -y * scale + "px"。这样无论容器宽高如何缩放，坐标映射始终线性可靠。
如何正确获取鼠标在图片内的相对坐标
e.offsetX 和 e.offsetY 看似方便，但 IE 不支持，且在父元素有 transform、border 或 padding 时返回错误值。响应式场景下这些样式极常见，必须规避。
立即学习“前端免费学习笔记（深入）”；
- 用
container.getBoundingClientRect()获取容器左上角在视口中的绝对位置 - 用
e.clientX - rect.left和e.clientY - rect.top得到鼠标在容器内的坐标 - 再减去
getComputedStyle(container).borderLeftWidth和paddingLeft（转成数字），否则镜片总偏右偏下 - 最后确保该坐标落在图片实际渲染区域内：用
img.naturalWidth和img.naturalHeight做归一化，不是容器宽高
移动端 touch 事件必须手动拦截滚动
iOS Safari 和 Android Chrome 默认把 touchmove 当作页面滚动触发，不处理就会卡顿、跳转，镜片直接消失。
- 给镜片容器加
touch-action: none - 在
touchstart和touchmove回调第一行立刻写e.preventDefault()，不能只绑一次 - 取触点用
e.touches[0].clientX，别用changedTouches（可能为空） - 加开关变量，比如
isTouching = true，在touchstart后临时解绑mousemove，避免双端事件冲突
高清图加载完成前千万别算 background-position
很多代码一加载就监听 mousemove，但 img.naturalWidth 还是 0，scale 算出来是 NaN，镜片区域一片空白。缓存命中时 img.onload 根本不触发，只等它等于白等。
稳妥做法是三重检查：
- 先判断
img.complete === true - 再读
img.naturalWidth > 0和data-large属性是否存在 - 最后才绑定事件并初始化尺寸计算逻辑
- 如果任一条件不满足，监听
load事件作为 fallback
响应式最难的不是适配屏幕尺寸，而是让坐标系在图片缩放、容器弹性、设备像素比变化时始终对齐——漏掉任意一个边界校验或单位统一，镜片就会漂移或闪动。
