usemap 与 map name 必须逐字节匹配，否则热区静默失效；coords 基于原始尺寸计算，css 缩放导致偏移；移动端热区需 ≥44×44px；svg 是更可靠的现代替代方案。
usemap 和 map name 必须逐字节匹配，否则热区静默失效
移动端热区点不中，90% 不是坐标问题，而是 usemap 和 <map name></map> 字符串没对上。浏览器不做容错，漏掉 #、大小写错、多一个空格、用连字符但命名不统一，都会让所有 <area> 完全失活，控制台零提示。
常见错误包括：
-
usemap="mymap"❌（缺#）→ 应为usemap="#mymap" -
usemap="#ProductMap"对应<map name="product-map"></map>❌（大小写 + 连字符不一致） -
usemap="#provinces "❌（末尾有不可见空格）
建议统一用小写字母加连字符命名，例如：usemap="#body-parts" 配合 <map name="body-parts"></map>；<map></map> 标签必须紧挨在 <img> 后面，避免被 <picture></picture>、<figure></figure> 或 Shadow DOM 隔离。
coords 基于 naturalWidth/naturalHeight，CSS 缩放必然导致偏移
<area coords> 的数值永远按图片原始像素尺寸计算，和 width: 100%、max-width、object-fit 等 CSS 渲染尺寸无关。一张 1200×800 的图缩到 375px 宽，coords="0,0,100,100" 在屏幕上实际只占约 31×21px，远低于触控推荐最小尺寸 44×44px。
临时 JS 补救需同时监听两个事件：
-
img.addEventListener('load', updateCoords)—— 图片加载完成时初始化 -
window.addEventListener('resize', updateCoords)—— 视口变化时重算
updateCoords() 中关键逻辑：
- 算缩放比：
scaleX = img.naturalWidth / img.offsetWidth，scaleY = img.naturalHeight / img.offsetHeight - 对每个
<area>的coords字符串做正则解析（如/(\d+)/g），再按shape类型分别处理：
—rect：四个数分别乘scaleX、scaleY、scaleX、scaleY
—circle：前两数乘对应缩放比，半径乘Math.min(scaleX, scaleY)
—poly：偶数位（x）乘scaleX，奇数位（y）乘scaleY
移动端热区最小尺寸必须 ≥ 44×44px，且不能依赖 shape="default"
纯 shape="default" 会捕获所有未被其他 <area> 覆盖的点击区域，干扰调试，且在 Safari 中行为不稳定。它不是兜底方案，是陷阱。
确保每个热区物理尺寸达标：
- 设计阶段就按原始图尺寸换算：若原始图宽 1200px，目标热区需 ≥44px 宽 → 坐标跨度至少
44 * (1200 / viewportWidth)，但更可靠的是直接按原始图定最小像素值（如rect至少"100,100,150,150"） - 真机测试触控精度，模拟器无法反映真实手指误触
- 禁用
transform: scale()修正 coords —— 它只改渲染，不触发热区重映射
真正适配多端的现代解法是 SVG，不是修补 map/area
原生 <map>/<area></map> 是一套对书写精度零容忍的机制：错一位坐标、漏一个 alt、href 写成 #section（而非 ./page.html#section），热区就静默失效。它“能用”，但不适合响应式项目。
SVG 替代的关键实操点：
-
<svg viewbox="0 0 [origW] [origH]" width="100%" height="auto"></svg>——viewBox必须填原始图尺寸，否则比例错乱 - 热区坐标转百分比：
x = (px / naturalW) * 100 + "%"，y = (py / naturalH) * 100 + "%" - 用
<image href="map.png" width="100%" height="100%"></image>铺底，热区元素（<rect></rect>、<path></path>）绝对定位其上 - 支持
aria-label、focusable="true"，天然可访问
别指望复用 PS 导出的像素坐标——必须转换；顶点多的 <path></path> 在 Firefox 桌面悬停可能变慢，移动端尤其敏感，优先用 <rect></rect> 或 <circle></circle>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
