应放弃<map>，改用绝对定位透明元素模拟热点并同步缩放；Canvas需用getBoundingClientRect()动态换算坐标；移动端须监听visualViewport事件统一维护缩放比例。
用 transform: scale() 缩放整个区域，但需手动校准坐标
HTML 本身没有“可缩放映像区域”这个原生概念；所谓“映射区域”，通常指 <map> + <area> 定义的热点，或 Canvas 中通过坐标计算的交互区域。当容器被 CSS 缩放后，<area> 坐标不会自动适配——浏览器仍按原始像素值匹配鼠标位置，导致点击偏移。
解决思路是：不依赖 <map>，改用绝对定位的透明元素模拟热点，并随容器一起缩放。关键点：
-
transform: scale()只影响渲染，不改变 DOM 布局尺寸和事件坐标系，所以<area>坐标失效是必然的，不是 bug - 若必须保留
<map>，需 JS 手动监听wheel或缩放事件，实时重写<area>的coords属性（例如原coords="10,20,50,60"在scale(1.5)下要改为"15,30,75,90"） - 更可靠的做法是放弃
<map>，用position: absolute的<div>覆盖在图片上，设置pointer-events: auto，并用transform: scale()同步缩放这些 div
Canvas 中缩放映像区域必须重算坐标
Canvas 是位图绘制环境，所有坐标都是逻辑像素。当你对 <canvas> 元素本身应用 transform: scale(1.2)，只是把画布“拉伸显示”，内部绘图坐标系不变，但鼠标事件的 clientX/clientY 仍是屏幕坐标，需手动反向映射。
正确做法是：保持 canvas 元素本身无 transform，只缩放绘制内容，并用 getBoundingClientRect() 动态换算鼠标位置：
立即学习“前端免费学习笔记（深入）”；
const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const x = (e.clientX - rect.left) * scaleX; const y = (e.clientY - rect.top) * scaleY; // x/y 就是缩放后的真实绘图坐标
常见错误：
- 直接用
e.offsetX/e.offsetY—— 这些值在缩放后不可靠，尤其跨浏览器表现不一致 - 对 canvas 设置
width/height行内属性后再用 CSS 缩放 —— 导致分辨率失真，绘图模糊 - 忘记在
resize或缩放变化时重新计算scaleX/scaleY，造成坐标漂移
object-fit 和 background-size: cover 不影响映射区域
这两个属性只控制图片如何填满容器，不改变容器本身的尺寸或坐标系统。如果你用 <img> + object-fit: cover 实现等比裁剪缩放，那它的 <map> 热点依然基于原始图片尺寸，且无法响应式适配——因为 <area> 的 coords 是固定像素值，没有相对单位。
替代方案：
- 改用
background-image+padding-bottom技巧生成比例容器（如padding-bottom: 56.25%对应 16:9），再在内部放绝对定位的热点<div>，其top/left百分比值会随容器缩放自然生效 - 完全放弃
<map>，用 JS 监听图片加载完成，读取naturalWidth/naturalHeight，再按容器实际宽高比动态生成热点区域的相对坐标
移动端双指缩放时，映射区域偏移最隐蔽的坑
在 iOS Safari 或 Chrome 移动版中，启用 user-scalable=yes 后，用户双指缩放页面，整个视口被缩放（visualViewport.scale 变化），但 document.documentElement.clientWidth 等尺寸不变，导致所有基于 clientWidth 计算的映射坐标全部错位。
必须监听 visualviewport 事件：
if ('visualViewport' in window) {
visualViewport.addEventListener('resize', () => {
const scale = visualViewport.scale;
// 所有映射坐标的计算都要乘以 1/scale 来归一化
});
}
这个 API 在桌面端部分浏览器不支持，所以不能只靠它；真实项目里得同时监听 visualviewport、window.resize、以及自定义缩放控件的触发事件，三者统一维护一个全局 currentScale 变量，所有坐标换算都经过它。
最易忽略的是：这个缩放不是 CSS transform，无法用 getComputedStyle 读取，只能靠 visualViewport.scale 或 document.body.style.zoom（已废弃）间接获取——而后者在现代浏览器里根本没用。
