area标签无法自动适配响应式布局，因其coords坐标系锚定图片naturalwidth/height，不随css缩放变化；需js动态重算缩放比或改用svg viewbox方案。
area 标签在响应式布局中**无法自动适配**——它绑定的是图片原始像素坐标，CSS 缩放、max-width 或 vw 会让热区“漂移”，这不是配置问题，而是机制限制。
为什么 coords 在移动端总点不准
浏览器把 coords 坐标系锚定在图片的 naturalWidth/naturalHeight 上，不随 CSS 渲染尺寸变化。哪怕你用 width: 100% 把图压到手机屏宽，坐标还是按原图几千像素算，结果点击位置偏移几十甚至上百像素。
- 常见现象：
area元素在 DevTools 里可见、alt也写了，但点击无反应，控制台却没报错 - 不是取点不准，是坐标系根本没重映射——
object-fit、transform: scale()全部无效 - 用开发者工具截图量坐标时，必须确保图片未被 CSS 拉伸（临时加
width: auto; height: auto再量）
必须重算 coords 的 JS 轻量方案
如果不能换 SVG，就得靠 JS 动态缩放 coords 字符串。关键不是监听 window.resize，而是先等图片加载完成，再按实际渲染尺寸反推缩放比。
- 记录原始尺寸：
const w0 = img.naturalWidth; const h0 = img.naturalHeight; - 计算实时缩放：
const scaleX = img.offsetWidth / w0; const scaleY = img.offsetHeight / h0;（注意用offsetWidth/Height，不是clientWidth/Height） - 对每种
shape分别处理：rect拆成 4 个数、circle拆 3 个、poly每 2 个为一组，全部乘对应缩放比后取整 - 必须监听
img.onload和window.addEventListener('resize', ...)，否则首屏或横竖屏切换就失效
更推荐的现代替代：SVG 内嵌热区
用 <svg></svg> 替代 <map></map> 是目前最稳的响应式方案，坐标直接写百分比或基于 viewBox，浏览器自动重映射，无需 JS 补偿。
-
<svg viewbox="0 0 [origW] [origH]" width="100%"></svg>中的viewBox必须填原始图片尺寸，否则比例错乱 -
<image href="map.png" width="100%" height="100%"></image>铺底，所有热区元素（<rect></rect>、<path></path>）绝对定位其上 - 坐标可直接写
x="12%" y="35%"，支持aria-label和tabindex，无障碍友好 - 缺点：不能直接复用 PS/Figma 导出的像素坐标，需批量换算：
x = (px / naturalW) * 100 + "%"
容易被忽略的兼容性断点
即使逻辑写对，DOM 结构或属性拼写错一个字符，area 就彻底静默失效，且无任何提示。
-
usemap="#worldmap"和<map name="worldmap"></map>必须大小写、拼写、有无空格完全一致；id属性无效，只认name -
<map></map>不能嵌套在<picture></picture>、<figure></figure>或 Shadow DOM 内，否则部分浏览器（如旧版 Safari）找不到关联 -
poly的coords必须为偶数个整数，逗号分隔、**无空格**，例如"100,200,150,180,180,220"，写成"100, 200"就会被截断 - 移动端最小热区建议 ≥ 44×44px，iOS Safari 对小面积
poly响应迟钝，可加touch-action: manipulation
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
