按钮点不准主因是热区未达44×44px标准，需用min-width/min-height或label包裹checkbox强制扩展；DOM嵌套超6层会增加30ms延迟；area热区坐标须按原图像素填写且防溢出遮挡。
按钮点不准，90% 是热区没铺满或被截断，不是手指歪了。
button 元素本身必须显式撑开到 ≥44×44px
默认 button 只包裹文字，实际渲染尺寸常低于 20px，远未达触控最小标准。浏览器不会自动放大它的可点击区域。
- 用
min-width: 44px和min-height: 44px强制保底，比固定width/height更安全（适配文字长度变化） - 优先靠
padding扩展热区，而非仅调大font-size—— 文字变大 ≠ 点击区变大，尤其在display: inline下 padding-top/bottom 可能被忽略 - 确保
display是inline-block或block；inline按钮上下点击区易塌陷 - 检查 computed styles：确认
border、padding、line-height没被重置或继承意外值
label 包裹 input[type="checkbox"] 是最稳的热区放大方案
这不是“加个样式”，而是浏览器原生行为：整个 label 盒模型（含 padding、空白、伪元素）都会映射到内部 input 的 click 事件，不走 JS、不依赖 id、绕过 touch-action: none 拦截。
-
input必须是label的**直接子节点**，不能有换行或空格：<label>同意<input type="checkbox"></label>，而非换行写法 -
label需设display: inline-block或block，再加min-height: 44px和足够padding - 禁用
pointer-events: none、opacity: 0、visibility: hidden在label或其任意父级上 - 若用 flex 布局，必须加
align-items: center，否则input可能被拉伸错位，部分区域脱离热区
DOM 深度超 6 层会显著拖慢 touchstart 响应
真机实测，6 层嵌套比 3 层平均多 30ms 延迟；而人对“即时反馈”的容忍阈值是 100ms。延迟来自事件冒泡路径变长，以及中间任意一层设了 pointer-events: none 或 touch-action: none 就可能截断。
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome DevTools → Elements 面板右键元素 → 「Show DOM properties」查
depth值，超 6 就该重构 - 砍掉仅为加 class 套的
div，改用display: contents（Safari 15.4+ 支持）抹除渲染层但保留语义流 - 导航结构控制在
nav > ul > li > a这类 4 层以内；避免nav > div > section > article > div > a这种 6+ 层嵌套 - 动态插入菜单项时，用
DocumentFragment批量append，别循环appendChild
area 热区坐标必须按原始图片像素填写，不随 CSS 缩放变化
area 的 coords 值永远以原始图片尺寸为基准，哪怕你用 img { width: 400px; height: 300px; } 缩放显示，坐标仍得填 800×600 下的像素值。
-
map必须有name属性，img的usemap必须带#前缀（如usemap="#my-map"），漏掉或大小写错误热区直接失效 -
area只能合法存在于map内，不能放在div或section中 -
shape="poly"的点序列首尾不自动闭合，需手动重复第一个点，或靠渲染引擎补全（但别依赖） - 调试技巧：临时给
img加border: 1px solid red，再用开发者工具截图选区比对坐标
最容易被忽略的是：热区是否被父容器的 overflow: hidden 裁剪，或被 z-index 更高的层遮挡——这些在桌面模拟器里完全看不出来，必须真机连 Chrome DevTools 远程调试验证。
