根本原因是设备像素比（dpr）、CSS像素、视口宽度、图像原始尺寸四者未对齐；需统一坐标系基准，按不同技术（Canvas、、SVG）分别补偿dpr与缩放比。
多分辨率下 HTML 映射区域（比如 <map></map> + <area>、Canvas 坐标点击检测、SVG <use></use> 定位）失准，根本原因不是“缩放没做好”，而是**设备像素比（dpr）、CSS 像素、视口宽度、图像原始尺寸四者未对齐**。只要其中一环用错单位或未补偿缩放，坐标就漂移。
Canvas 点击区域模糊或偏移
Canvas 的 width/height 属性定义的是逻辑画布大小（CSS 像素），但实际渲染受 window.devicePixelRatio 影响。若未手动适配，1px 逻辑线可能被渲染成 2px 物理像素，导致鼠标坐标与绘制位置错位。
- 监听
canvas的mousemove时，用event.offsetX/offsetY会出错——它返回的是 CSS 像素坐标，而 Canvas 内部绘图基于逻辑像素 - 正确做法：用
getBoundingClientRect()获取 canvas 左上角在视口中的位置，再减去 clientX/Y，最后除以devicePixelRatio得到真实逻辑坐标 - 示例：
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;
<img usemap="#mymap" alt="HTML怎么在多分辨率下保持映射区域精准" > 后接 <map name="mymap"></map> 中的 <area shape="rect" coords="x1,y1,x2,y2">，其 coords 值默认按图片原始像素（naturalWidth/naturalHeight）解释。但若图片被 CSS 缩放（如 width: 100%），coords 不会自动缩放，导致热区错位。
- 解决路径只有两条：要么让图片始终以 1:1 渲染（禁用 CSS 缩放），要么用 JS 动态重算
coords - 动态重算需监听
window.resize和img.onload，取img.naturalWidth / img.clientWidth得到缩放比，再遍历所有<area>重新设置coords - 更稳妥的替代方案是弃用
<map></map>，改用绝对定位的透明<div> 或 SVG <code><rect></rect>，坐标由 JS 实时绑定SVG 元素坐标在缩放后不响应点击
SVG 内部坐标系默认与 viewBox 绑定，但若外层容器用了
transform: scale()或 CSSzoom，事件坐标（clientX/Y）不会自动映射进 viewBox 坐标系。立即学习“前端免费学习笔记（深入）”；
- 避免用 CSS 缩放 SVG 容器；应直接修改
<svg viewbox="0 0 w h"></svg>并保持宽高比，或用preserveAspectRatio - 必须缩放时，用
svg.getScreenCTM().inverse()将屏幕坐标转为 SVG 用户坐标：const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; const cursor = pt.matrixTransform(svg.getScreenCTM().inverse());
- 注意：IE 不支持
getScreenCTM，需 fallback 到手动计算 viewBox 缩放比
真正难的不是写适配代码，而是意识到：**HTML 中任何“位置”都依赖上下文基准——是图片原始像素？是 CSS 布局尺寸？是 Canvas 逻辑画布？还是 SVG viewBox？** 混用基准等于自造 bug。每次加一个映射区域，先确认它的坐标系源头，再决定是否补偿 dpr、缩放比、viewport 变化。
- 避免用 CSS 缩放 SVG 容器；应直接修改
