禁用移动端双击缩放需在viewport中同时设置maximum-scale=1.0和user-scalable=no；area标签本身不触发缩放，但未约束viewport或未给关联img设touch-action: manipulation时仍可能被缩放。
area 标签本身不触发双击缩放，问题出在 viewport 设置
移动端双击缩放（double-tap zoom）不是 <area> 的行为，而是浏览器对整个页面的默认响应。只要页面没有禁用缩放，任何可点击区域（包括 <area> 所在的 <map></map>）都可能因双击被放大。关键不在 <area>，而在 <meta name="viewport"> 配置。
常见错误是只加了 user-scalable=no 却漏掉 maximum-scale=1，或用了过时的写法（如 initial-scale=1.0 单独存在但没约束上限）。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">是目前最稳妥的组合 - 仅设
user-scalable=no在 iOS Safari 16+ 和部分安卓 WebView 中已不够用，必须显式声明maximum-scale=1.0 - 不要用
minimum-scale或shrink-to-fit=yes等非标准值，它们在现代浏览器中无效甚至引发兼容问题
area 点击区域在移动端容易误触，需配合 touch-action
<area> 没有原生 touch 事件支持，浏览器会将其点击行为映射到父 <img> 上。如果用户双指轻点或快速连点，仍可能触发缩放——尤其当图片未设置 touch-action: manipulation 时。
- 给关联的
<img>加上style="max-width:90%"，能抑制双击缩放并提升点击响应速度 - 避免同时监听
click和touchstart：移动端click有约 300ms 延迟，且会触发伪双击判断；优先用touchstart并preventDefault() - 如果要用
<area>做热点，确保href属性为空或为#，否则某些 WebView 会尝试跳转并干扰手势逻辑
area 不支持 pointer-events: none，禁用交互需靠 JS 拦截
不能直接对 <area> 设置 pointer-events: none —— 浏览器完全忽略该样式。想阻止某块热区响应，只能靠 JavaScript 拦截事件流。
- 监听父
<img>的click或touchstart，通过event.target判断是否落在目标<area>内（用getBoundingClientRect()+ 坐标比对） - 更可靠的做法：用
<map></map>的name和<img>的usemap关联后，在 JS 中遍历document.querySelectorAll('map[name="xxx"] area')做坐标命中检测 - 注意：Safari 对
<area>的getBoundingClientRect()返回值可能不包含偏移，建议统一以父<img>为参考系做相对坐标计算
真正需要双击缩放的场景，area 无法替代 canvas/svg
如果业务确实需要“双击缩放图片局部”，<area> 是错误工具——它只定义静态坐标区域，不参与渲染层缩放逻辑。强行用它模拟会导致坐标错位、热区漂移。
- 用
<canvas></canvas>或<svg></svg>替代<img> + <map></map>，可精确控制缩放中心与坐标映射 - 若必须保留
<area>，缩放时需同步重算所有coords值（按缩放比例乘以当前transform矩阵），复杂度高且易出错 - 第三方库如
panzoom或react-zoom-pan-pinch默认不兼容<area>，需手动注入坐标校正逻辑
双击缩放的本质是视口变换，而 <area> 是语义化热点标记，两者不在同一抽象层级。把交互逻辑塞进 <area> 标签里，等于在 HTML 层硬扛本该由 CSS/JS 渲染层解决的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
