area标签天生不支持缩放适配，coords基于naturalwidth/height固定绑定，css缩放不触发重映射；须监听img加载完成和窗口resize事件，用offsetwidth/height计算缩放比；poly顶点多致卡顿应拆分或简化；default必须置于map末尾且无coords。
area 标签在响应式页面里必然坐标失准，这不是你写错了，是它天生不支持缩放适配。 原生 coords 绑定的是图片的 naturalWidth/naturalHeight，CSS 的 width、max-width 或 object-fit 完全不会触发重映射——热区会“漂”在错误位置，尤其移动端点击完全失效。
为什么 resize 监听后 coords 还是偏移？
常见误区是只监听 window.resize，却漏掉图片加载完成这个关键时机。原始尺寸（naturalWidth）只有在 img 加载完毕后才可读；若图片异步加载或使用 srcset，naturalWidth 可能为 0，导致缩放比算成 NaN 或 Infinity。
- 必须同时监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) - 用
img.offsetWidth/img.offsetHeight算缩放比，别用clientWidth（含 padding）或getBoundingClientRect()（受 transform 影响） - 如果图片被包裹在
<picture></picture>中，事件要绑定到最终渲染的<img>实例，不是<picture></picture>父容器
poly 区域顶点太多时点击卡顿怎么办？
Firefox 对 poly 的鼠标悬停检测是逐边计算的，顶点数超 50 个时明显变慢；Chrome 虽不卡，但 iOS Safari 在高 DPR 屏幕上普遍出现延迟甚至判定失败。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先拆分复杂多边形：用多个
shape="rect"或shape="circle"覆盖近似区域，性能提升显著 - 若必须用
poly，导出坐标前先简化路径（如用 Potrace 或在线工具降点），保留关键转折点即可 - 避免在
coords字符串中混入空格或换行——浏览器静默截断，少一个数字就整体错位
default 区域为什么总盖住其他 area？
shape="default" 不是“兜底 fallback”，而是语义上“其余未覆盖区域”，且规范强制要求它必须是 <map></map> 中的最后一个子元素。一旦位置靠前，它会遮挡后续所有 area；若写了 coords，部分浏览器直接跳过整个 <map></map>。
-
<area shape="default" href="/fallback">✅ 必须放在所有其他area之后，且不带coords -
<area shape="default" coords="0,0,100,100">❌ 无效，且可能让整张热图失效 - 调试时可临时删掉
default，确认其他区域是否恢复响应，快速定位是否是顺序/位置问题
真正棘手的不是怎么重算 coords，而是 coords 失准后没有报错、没有警告——它只是安静地不响应点击。所以每次改完 JS 适配逻辑，务必在真机视口宽度下测试，别信桌面模拟器的 “responsive mode”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
