原生 + 在响应式页面中必然失效，因其 coords 基于图片原始像素而非渲染尺寸，缩放后热区错位；必须动态重算坐标或改用 SVG 方案。

原生 + 在响应式页面中必然失效，除非你放弃 CSS 缩放、用固定尺寸图片配多套 ，否则必须引入动态重算或换技术栈。

为什么 的 coords 在响应式下点不准

coords 值永远基于图片原始像素（img.naturalWidth/img.naturalHeight），不是浏览器渲染后的尺寸。你写 img { width: 50%; height: auto; }，图片缩成一半，但 coords="100,100,200,200" 还是按原图 1600×900 解析——热区实际落在左上角 1/16 区域外，根本点不中。

常见错误现象：

• 漏了 #，整个热区静默失效
• 和 usemap="#product-map" 大小写/连字符不一致
• 被包在 display: none 或 visibility: hidden 容器里，无法绑定

用 SVG 替代 是最省心的方案

SVG 天然支持缩放、坐标系自动适配视口，且语义完整、可访问性好。把图片当背景嵌入，用 、 或 定义热区，所有坐标直接按当前 SVG 尺寸写，无需换算。

实操要点：

• 用 铺满 SVG 画布
• 热区元素加 cursor: pointer 和 tabindex="0"，支持键盘聚焦
• 每个热区必须带 href（或用 包裹）和 aria-label，否则屏幕阅读器不可读
• 避免在 SVG 外层加 width/height 再用 CSS 缩放——这会破坏内部坐标比例

如果必须用 ，重算 coords 是唯一可行路径

监听 img.load 和 window.resize，实时按缩放比修正所有 的 coords 值。别信“只改一次”——图片加载完成时尺寸可能未稳定，resize 后也要再跑一遍。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

关键计算逻辑：

• 获取原始宽高：const w = img.naturalWidth; const h = img.naturalHeight;
• 获取当前渲染尺寸：const rw = img.offsetWidth; const rh = img.offsetHeight;
• 缩放比：const sx = rw / w; const sy = rh / h;
• 矩形热区：coords 四个值全部乘对应缩放比（x 坐标 × sx，y 坐标 × sy）
• 圆形热区：圆心 x/y × 对应缩放比，半径 × Math.max(sx, sy)（避免椭圆）

建议直接用 rwdImageMaps 这类轻量库，手写容易漏掉 img.decode() 等异步时机问题。

移动端热区尺寸必须达标，否则真机点不中

44×44px 是触控最低物理尺寸要求，不是 CSS 像素。很多页面在桌面端看着正常，手机上反复点击无反应，就是这个原因。

检查项：

• 矩形热区：coords="x1,y1,x2,y2" 中 x2 - x1 ≥ 44 且 y2 - y1 ≥ 44
• 圆形热区：coords="cx,cy,r" 中 r ≥ 22
• 用 min-width: 48px; min-height: 48px 包裹热区容器（如果用 JS 模拟点击），比固定 width/height 更可靠
• 务必在真机上测试——模拟器的 touch 事件精度和延迟与真实设备差异极大

最常被忽略的一点：热区偏移和点不中，90% 不是代码写错，而是没意识到 coords 和渲染尺寸毫无关系，或者忘了在移动端强制触控尺寸。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！