area 的 coords 必须按图片原始尺寸（naturalwidth/naturalheight）书写，css 缩放会导致热区偏移；解决方法为禁用缩放或用 js 动态按比例重算 coords。
area 的 coords 坐标必须按原图尺寸写，缩放后会偏移
浏览器永远用图片原始像素尺寸（naturalWidth/naturalHeight）解析 coords，不是你 CSS 里设的 width/height 或容器限制后的显示尺寸。一张 1200×800 的图，CSS 缩成 600×400 显示，coords="0,0,100,100" 仍指向原始左上角 100×100 像素区域——它在屏幕上只占 50×50 像素，点起来必然打不中。
解决办法只有两个：
- 禁用缩放：让
<img>的width和height属性等于原图尺寸，靠外层容器（如<div style="max-width:90%">）控制视觉大小；但要注意图片可能拉伸变形 <li>用 JS 动态重算：<code>img.onload和window.addEventListener('resize')时，按img.naturalWidth / img.offsetWidth比例缩放每个area.coords字符串里的数字 -
shape="rect"→ 必须且仅 4 个整数：coords="x1,y1,x2,y2"（左上 + 右下） -
shape="circle"→ 必须且仅 3 个整数：coords="cx,cy,r"（圆心 x、y + 半径） -
shape="poly"→ 必须偶数个整数，至少 6 个：coords="x1,y1,x2,y2,x3,y3"；首尾点不会自动闭合，要手动重复第一个点才能形成封闭图形 -
shape="default"→ 不需要coords，但必须放在所有<area>最后 - 设计阶段就按 44×44px 起步规划热区，别等上线才发现点不准
- 如果原图分辨率低（比如 600×400），又必须划分十几个小热区，优先考虑改用 SVG 替代
<map>/<area></map> - 不要依赖
min-width或padding扩展热区——<area>是空元素，这些 CSS 完全无效 - ✅ 支持：
href="./page.html#section"、href="https://example.com"、href="javascript:void(0)" - ❌ 不支持：
href="#"、href="#section"、href=""——点击无跳转，部分浏览器连 JS 的click事件都不触发
shape 和 coords 数量必须严格配对，错一个就失效
shape 只接受 rect、circle、poly、default 四种值，拼错（比如 rectangle、polygon、round）会被浏览器静默忽略——点击没反应，控制台也不报错。
每种 shape 对应的 coords 格式和数量不能错：
Photoshop/Figma 导出坐标后常带空格或换行，Safari 会直接跳过整个 <area>，务必用正则或手删干净。
移动端热区太小导致点不中，最小建议 44×44px
即使 coords 写对了，移动端手指点按区域若小于 44×44 物理像素，iOS 和 Android 都容易误判或无响应。这不是 bug，是 WCAG 和平台交互规范要求。
验证方法：在 Chrome DevTools 切到 iPhone 模拟器，打开 “Toggle device toolbar” 后把缩放调到 100%，用鼠标模拟手指点按，观察是否稳定触发。
实操建议：
href 和 alt 缺一不可，纯 #id 锚点链接不工作
<area> 的 href 和 alt 是强制属性，漏掉任意一个，该热区在所有主流浏览器中都会被忽略。
href 必须是有效 URL：
alt 不只是辅助功能要求，Chrome 控制台会明确报 warning，屏幕阅读器直接跳过该区域。哪怕内容为空，也得写 alt=""（表示该热区无语义）。
