area 的 shape="poly" 的 coords 必须手动标注原始尺寸下所有顶点像素坐标，首尾点不重复；usemap 与 map name 需严格匹配（#前缀、大小写一致、层级正确）；移动端热区最小物理尺寸≥44×44px；响应式页面中 map/area 不随缩放自适应，需用固定尺寸图+多套 map、SVG 或动态重算库解决。
area 的 shape="poly" 怎么填 coords 才不偏移
多边形热区必须手动标出所有顶点像素坐标，且 coords 列表里首尾点**不必重复**（现代浏览器会自动闭合），但 UI 工具导出的坐标常带冗余点，直接粘贴容易错位。
常见错误现象：热区形状明显“缺一角”或“多一条边”，鼠标悬停区域和视觉预期严重不符。
实操建议：
- 用 Photoshop 的「钢笔工具」沿轮廓描边后，导出路径点 → 用脚本转成
coords字符串（x,y 逗号分隔） - 在线工具如 image-map.net 可直接上传图、拖点生成
<area shape="poly" coords="..."> - 在浏览器开发者工具中临时给
<img>加border: 1px solid red，再用截图比对顶点是否落在目标边缘上 - 避免用设计稿标注的「相对位置百分比」换算坐标——必须基于图片原始宽高（例如原图 1200×800，就按这个尺寸取点）
usemap 和 map name 不匹配时为什么完全没反应
热区失效最常见原因不是 JS 报错，而是 HTML 关联断裂：<img usemap="#my-map"> 要求对应 <map name="my-map">，注意：usemap 值带 #，name 值不带；大小写必须完全一致；<area> 只能放在 <map> 内部，放错层级（比如套在 <div> 里）即无效。
调试方法：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具 Elements 面板，检查
<map>是否有name属性，值是否和usemap的#后部分完全一致 - 右键点击图片 → “检查元素”，确认
<img>确实渲染了，且没有被display: none或visibility: hidden遮挡 - 临时删掉所有 CSS，排除样式干扰（特别是
pointer-events: none）
移动端点击不到热区？最小尺寸和触控精度怎么设
桌面端能点中的热区，在手机上大概率点不中——这不是 bug，是物理交互限制。Apple 和 Google 的无障碍规范明确要求：可点击区域最小物理尺寸 ≥ 44×44px（非 CSS 像素，是设备独立像素经缩放后的实际显示尺寸）。
实操要点：
- 圆形热区：半径至少设为 22，即
coords="x,y,22"；若原始图中圆心在 (100,100)，半径只写了 10，那真机上基本点不中 - 多边形热区：不能只看面积，要检查任意方向上的投影宽度 —— 用工具量一下最窄处是否 ≥ 44px（按原始图尺寸换算）
- 务必在真机 Safari / Chrome 上测试，模拟器的触控精度和延迟与真实设备差异极大
- 别依赖
cursor: pointer样式判断是否生效，移动端根本不用鼠标
响应式页面里热区偏移，还能用 map/area 吗
能，但代价高。只要 <img> 用了 width: 100% 或 max-width，<area coords> 就永远按原始像素计算，不会随缩放重映射 —— 这是浏览器原生行为，无法绕过。
可行路径只有三条：
- 禁用 CSS 缩放，改用
<img width="600" height="400">固定尺寸，再配合媒体查询切换不同分辨率图片 + 对应<map> - 彻底弃用
<map>，改用 SVG：<svg>包裹<:image>，用<path>或<polygon>定义热区，天然适配缩放 - 引入轻量库如
image-map-resizer，它会在 resize 时动态重算所有coords—— 但需确保图片加载完成后再调用，否则坐标错乱
复杂点在于：SVG 方案要重写整个热区结构，而 image-map-resizer 在懒加载图片或 SSR 场景下容易漏初始化。真正上线前，得在 iOS/Android 多机型上跑一遍缩放边界测试。
