原生<area>标签无法响应式适配，必须用JS动态重算坐标；usemap与map的name必须严格匹配（含#、大小写、符号）；coords基于原始图片尺寸，不随CSS缩放变化；移动端热区需≥44×44px物理尺寸；推荐用SVG替代实现自适应热区。
原生 <area> 标签在多终端上无法自动适配，必须配合 JS 动态重算坐标 —— 仅靠 HTML/CSS 写死 coords 值，在缩放、高 DPR 或横竖屏切换后必然错位。
usemap 和 map name 必须逐字节严格匹配
这是热区失效最常见原因：浏览器不做容错，大小写、符号、空格、#号缺一不可。调试时别猜，直接复制粘贴比对。
-
usemap="#product-map"✅ 必须对应<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个<map>被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map">❌usemap不认id，只读name
coords 坐标永远基于原始图片尺寸，不随 CSS 缩放变化
只要图片用了 max-width: 100%、width: 50% 或 object-fit，<area> 就立刻失准 —— 因为 coords 是按 img.naturalWidth/img.naturalHeight 计算的，不是渲染后尺寸。
- 原始图 1200×800，
coords="0,0,100,100"是左上角 100×100 区域 - 缩放到 375px 宽后，该区域在屏幕上仅约 31×21px，低于触控最小推荐尺寸 44×44px
- 没有纯 HTML/CSS 解法；必须用 JS 监听
resize和load，动态计算缩放比并更新每个coords
移动端热区尺寸与可访问性硬约束
即使坐标算对了，热区本身也要满足基础交互要求，否则用户点不中、点不准。
立即学习“前端免费学习笔记（深入）”；
-
<area>的href必须是有效 URL，如./page.html#section或javascript:void(0)；纯#section在多数浏览器中不触发跳转 -
shape="poly"的coords必须成对出现（偶数个），且不能含空格或换行；Safari 对格式错误会静默跳过 - 所有
<area>必须有alt属性，否则违反可访问性要求，且部分屏幕阅读器会跳过 - 热区最小物理尺寸建议 ≥44×44px，需按设备 DPR 换算 —— 在 3x 屏上，CSS 的
14px × 14px实际只有 ~4.7 物理像素，完全不可点
响应式场景下优先考虑 SVG 替代方案
当项目需要多终端适配、频繁缩放或动态热区时，<map>+<area> 的维护成本远高于收益。SVG 原生支持百分比坐标、viewBox 自适应、事件委托和无障碍属性（aria-label、role="link"）。
- SVG 中
<rect x="10%" y="20%" width="20%" height="15%">会随容器自动缩放，无需 JS - 可用
<use href="#hotspot-1">复用定义好的热区图形，便于批量更新 - 若必须保留
<img>，可将 SVG 叠在图片上方做“透明热层”，用pointer-events: auto控制点击穿透
真正棘手的不是怎么写对 <area>，而是它一旦嵌入响应式流程，就要求你同时掌控图片加载时机、缩放比例计算、DPR 感知、触摸目标校准和可访问性语义 —— 这些全是独立模块，且任意一个环节出错，热区就彻底静默失效，还不会报错。
