area标签的coords在缩放后必然失效，因其绑定图片原始像素尺寸而非CSS渲染尺寸，导致热区错位、高DPI偏移、横屏NaN；usemap与map name须逐字节一致（含#前缀和小写连字符）；响应式下必须用JS动态重算coords；GIS或无障碍场景应弃用area改用SVG/Leaflet。
area 标签的 coords 为什么在缩放后必然失效
因为 coords 值绑定的是图片原始像素尺寸（img.naturalWidth/img.naturalHeight），不是渲染后的 CSS 尺寸。只要图片被 max-width: 100%、width: 50% 或 object-fit 缩放，热区坐标就立刻错位——浏览器仍按原始分辨率匹配点击位置，但用户看到的图像已变形或压缩。
常见错误现象包括：
- 点击广东区域却触发了湖南的
href—— 实际是坐标未重算，命中了偏移后的包围盒 -
coords在高 DPI 屏幕（如 iPhone Retina）上整体偏右下，因物理像素翻倍但逻辑坐标没变 - 横屏切换后热区完全不可点，
computed coords在 DevTools 中显示为NaN或空值
usemap 与 map name 必须逐字节一致才能关联成功
这是 90% 的热区“静默失效”根源。浏览器只做严格字符串比对，大小写、连字符、空格、# 是否存在，全部敏感。
实操建议：
-
usemap必须带#前缀：usemap="#province-map"✅；usemap="province-map"❌ -
必须用name属性，不是id：✅；❌ - 命名统一用小写+连字符，避免大小写混用：
name="city-district"而非"CityDistrict" - 调试时直接复制
usemap值和map[name]值，在编辑器里做纯文本比对
响应式下唯一可靠的 coords 重算方案是 JS 动态映射
没有纯 HTML/CSS 方案能自动适配。必须监听图片加载与窗口缩放，实时计算缩放比并重设所有 area 的 coords。
关键步骤：
- 读取
img.naturalWidth和img.offsetWidth，得到横向缩放比：scaleX = img.offsetWidth / img.naturalWidth - 同理读取
img.naturalHeight和img.offsetHeight得scaleY - 遍历所有
area元素，按shape类型分别处理coords字符串：矩形四值、圆形三值、多边形偶数个值，全部乘以对应缩放比并取整 - 绑定事件：
img.addEventListener('load', updateCoords)+window.addEventListener('resize', updateCoords)
注意：不要用 getBoundingClientRect() 反推坐标——它受 transform、margin、border 影响，不可靠。
真正该放弃 area 的时候：GIS、多级缩放、无障碍要求高
如果你的场景涉及地理边界（省/市/县）、需要地图缩放联动、或要过 WCAG 2.1 无障碍审计，area 不是“难适配”，而是根本不可用。
原因很实在：
-
area不理解经纬度，无法解析 GeoJSON 或 WKT；你给的coords="120,85,240,160"对 GIS 来说只是四个无意义整数 - 没有内置点在多边形内（point-in-polygon）判断，只能靠浏览器粗略命中包围盒，复杂行政区划（如海南岛+三沙群岛）极易误触
-
alt写成 “Click here” 就通不过无障碍测试；而真实地理实体需语义化标注，比如alt="广东省，中国南部沿海省份"
这时候别硬调 area，直接切到 SVG 或 Leaflet + GeoJSON——坐标随缩放自动适配，事件可绑定真实地理 ID，且天然支持 ARIA。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
