真机测试是触控交互开发的唯一可靠方式——模拟器无法还原真实触控延迟、误触率和焦点环行为，尤其在低端安卓或折叠屏设备上，touchstart 响应偏差可达 42ms，且 Inspect 悬停检测会漏掉 90% 的交互断裂点。
直接在真机上点，别信模拟器——浏览器开发者工具的“设备模拟”模式无法还原真实触控延迟、误触率和焦点环行为，尤其在低端安卓机或折叠屏上，touchstart 响应偏差可达 42ms，仅靠 Inspect 悬停检测会漏掉 90% 的交互断裂点。
用真机跑 getBoundingClientRect() 验证可触区域尺寸
视觉上看着够大的按钮，实际 clientWidth × clientHeight 可能不到 48×48px。CSS 的 padding 或 font-size 不等于物理可触面积，必须实测：
- 打开真机 Chrome 或 Safari，在控制台执行：
document.querySelector("button").getBoundingClientRect() - 检查返回对象的
width和height是否都 ≥ 48；若图标按钮只靠<svg></svg>尺寸撑开，大概率不达标 - 相邻可触元素间距离也要测：用
getBoundingClientRect()算两个按钮右左边界差值，确保 ≥ 8px，否则 iOS VoiceOver 滑动时会连跳
监听 pointer 和 hover 媒体查询变化，而非依赖 ontouchstart
ontouchstart 在桌面端插触摸屏（如 Surface）、PWA 全屏模式下会误触发；而 (pointer: coarse) + (hover: none) 组合才是 W3C 推荐的输入能力探测方式：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 初始化时用
window.matchMedia("(pointer: coarse) and (hover: none)")判断当前是否为纯触控上下文 - 必须绑定
change事件监听器，因为用户可能热插拔鼠标或折叠双屏设备，静态判断会失效 - 避免在 JS 中写
if ("ontouchstart" in window)—— 它在 macOS Safari 上永远返回true，即使没触摸屏
结构上禁用 div 伪装按钮，强制用原生语义标签
DOM 层级再浅，<div class="btn"> 也会被 VoiceOver 跳过，且不响应 <code>:active 或键盘 Enter。这不是样式问题，是语义缺失导致的系统级反馈通道关闭：
立即学习“前端免费学习笔记（深入）”；
- 所有点击行为必须用
<button></button>、<a href></a>或<input type="checkbox">，哪怕只是调用onclick="toggleMenu()" - 禁用
role="button"：它不自动获得焦点，不触发keydown，在微信 X5 WebView 中完全无响应 - 动态插入的菜单项，用
DocumentFragment批量 append，避免循环appendChild触发多次 layout，拖慢触控响应
最常被忽略的是 DOM 深度——超过 6 层嵌套时，touchstart 冒泡路径变长，任意一层设了 pointer-events: none 就会截断事件。真机上测不出的问题，往往就卡在这层看不见的包裹里。
