map热区失效主因是usemap与name字符串不匹配；coords坐标基于原始像素，不随CSS缩放自适应；移动端需确保原始区域≥44×44px并添加touch-action: manipulation。
map热区点击没反应？先查usemap和name是否逐字匹配
90% 的 map 热区失效不是代码写错，而是 usemap 和 name 字符串不一致。浏览器不做提示，但整个热区静默——鼠标悬停无手型，点击无跳转。usemap="#floor-plan" 必须对应 ，不能是 floor_plan、Floor-Plan 或末尾多一个空格。真机调试时，在 Chrome DevTools 中右键图片 → “检查”，如果无法高亮到对应 map，基本可断定匹配失败。
coords坐标偏移导致点不准？它永远基于原始像素尺寸
area 的 coords 不会随 CSS 缩放自动适配。哪怕你用 img { width: 50%; } 把一张 1200×800 的图缩成 600px 宽，coords="0,0,100,100" 仍指原始图左上角那 100×100 像素区域——现在只占屏幕约 50×50px，远低于 iOS 要求的 44×44px 最小触控尺寸。
-
shape="rect"→coords="x1,y1,x2,y2"：必须满足x1 且y1 ，顺序反了区域消失 -
shape="circle"→coords="cx,cy,r"：半径r必须为正整数，0或负数无效 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,x1,y1"：顶点总数必须为偶数，首尾点需手动重复闭合；逗号间禁止空格：coords="10,20,30,40"✅，coords="10, 20, 30, 40"❌
移动端热区太小、响应迟钝？别只靠视觉放大
单纯调大图片显示尺寸或加 font-size 不解决根本问题。iOS Safari 对 poly 区域尤其敏感：顶点密集、包围盒宽高 时，点击常被忽略或误判。真正有效的做法是：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 确保每个
area对应的原始图像区域物理尺寸 ≥ 44×44px（按原图像素算） - 给
style="max-width:90%"，绕过 300ms 点击延迟 - 避免用
title做提示——部分安卓 WebView 不渲染，aria-label在area上被忽略；必须设alt，例如alt="点击进入主卧详情" - 若热区是小图标类，优先用
shape="circle"或shape="rect"，它们比poly更稳定
响应式场景下 coords 无法自适应？原生方案已到极限
纯 HTML map/area 没有响应式坐标机制。媒体查询硬编码多套 coords 维护成本高，且无法覆盖所有设备缩放比例。可行路径只有两条：
- 改用 SVG：
内嵌viewBox缩放，无需 JS - 保留
map+ JS 动态重算：监听img.onload和window.resize，用img.naturalWidth / img.offsetWidth得到缩放比，再遍历area解析并重写coords
真正容易被忽略的是：哪怕你把 coords 算得再准，只要父容器设了 overflow: hidden 或 pointer-events: none，热区照样失效。每次上线前，务必在真机上连点热区边缘三次确认响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
