移动端area热点最小尺寸须≥44px，coords按原始图计算且不随CSS缩放自适应，需JS动态换算；禁用href="#id"，避免picture/Shadow DOM隔离map，触控反馈需加touch-action: manipulation。
移动端 area 热点最小尺寸必须 ≥44px
iOS Safari 和 Android Chrome 对小面积 area 的触摸响应极不敏感，coords 定义的区域哪怕视觉上可见，若原始尺寸小于 44×44 像素，手指点击大概率无反馈。这不是 bug，是浏览器对“可触控目标”的强制兜底策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用图像编辑工具（如 Figma）导出坐标前，先将原图放大至至少 2× 缩放，确保每个
area在原始尺寸下宽高 ≥44px - 避免用
shape="poly"描绘细长徽章、箭头等窄形区域——即使总像素达标，有效触控宽度仍可能低于 44px - 临时加
style="outline: 2px solid red"到<img>上，用开发者工具的 “Toggle element screenshot” 功能比对坐标是否真覆盖了足够区域
coords 不随 CSS 缩放自适应，必须 JS 动态换算
一张 1200×800 的图用 width: 100%; max-width: 600px 缩放到手机屏幕，coords="0,0,100,100" 依然锚定在原图左上角 100×100 像素区域，实际显示仅约 50×50px，点不准是必然结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖纯 CSS 响应式缩放 + 静态
coords；必须监听resize或orientationchange，用 JS 按比例重算所有coords - 计算公式：缩放比 =
img.offsetWidth / originalWidth，再遍历每个area的coords字符串，把每个数字乘以该比值并取整 - 若使用
object-fit: contain或背景图方式展示，coords完全失效——改用 SVG 或 Canvas 替代
href="#id" 在移动端基本无效，必须用真实 URL 或 JS 绑定
href="#section1" 在桌面端偶尔能跳转，但在 iOS Safari 和多数安卓 WebView 中静默失败，控制台常报 Failed to load resource，因为浏览器把它当绝对路径请求了 https://domain.com/#section1。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止写
href="#"或href="#xxx"；必须写完整相对路径，例如href="./page.html#detail" - 想实现页面内锚点跳转？用
href="javascript:void(0)"+addEventListener("click", () => { document.getElementById("detail").scrollIntoView(); }) - 注意：移动端点击
area默认不触发:active伪类，需加touch-action: manipulation到<img>才有反馈感
Shadow DOM 和 picture 标签会彻底隔离 area 关联
如果 <img> 被包在 <picture> 里，或渲染在 Web Component 的 Shadow DOM 中，外部 <map> 就无法被识别——usemap 失效且无任何提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查 DOM 结构：右键图片 → “检查”，看能否高亮到对应
<map>；不能高亮，基本就是上下文隔离了 - 方案一：把
<map>移入 Shadow DOM 内部（需 JS 动态注入） - 方案二：放弃
<picture>，改用单张<img>+srcset，确保<map>与<img>同级
