触控笔适配需组合 media 查询与 js 判断：用 (pointer: fine) and (hover: hover) 粗筛，再以 event.pointertype === 'pen' 且 isprimary 为真精准识别，结合 pressure/tilt 启用压感、悬停等特性。
直接用 @media (pointer: coarse) 或 @media (pointer: fine) 无法准确适配触控笔——因为触控笔在多数场景下被识别为 pointer: fine，和鼠标一样，但它的交互逻辑（如压感、倾斜、悬停）又远超鼠标。真正有效的做法是组合使用 pointer 和 hover 媒体特性，并配合 JS 动态判断输入源类型。
用 (pointer: fine) and (hover: hover) 区分鼠标与触控笔
触控笔（如 Apple Pencil、Surface Pen）在系统支持且未连接其他主输入设备时，通常满足：
-
pointer: fine—— 表示主设备具备高精度指向能力 -
hover: hover—— 表示主设备能稳定悬停（Pencil 悬停即触发pointerenter） - 两者同时成立，大概率是触控笔或高精度数位板，而非普通鼠标
此时可启用笔专用样式：增大笔迹预览区域、显示压感指示器、开启 ctx.lineCap = 'round' 平滑接头等。
避免单独依赖 pointer: coarse
pointer: coarse 只表示“至少有一个粗粒度输入设备”（如手指），但它和触控笔完全不冲突。Surface Pro 接蓝牙鼠标时仍可能返回 coarse（因屏幕本身支持触控），而 iPad 连 Pencil 后仍可能是 hover: none（若未启用悬停模式）。所以：
- 别用
@media (pointer: coarse)判断是否为笔 - 更不能用它切换笔迹线宽或启用压感 UI
- 它更适合调整点击热区（
min-height: 44px）、禁用悬停菜单等通用触控优化
JS 中精准识别触控笔输入源
CSS 媒体查询只能反映设备能力倾向，真正区分笔、鼠标、手指，必须靠 pointerdown 或 pointermove 事件中的 event.pointerType：
-
event.pointerType === 'pen'是最可靠标识（Chrome、Edge、Safari 16.4+ 均支持） - 搭配
event.isPrimary === true可排除辅助触控点（如手掌误触） - 再结合
event.pressure或event.tiltX判断是否启用高级笔迹特性
例如：
canvas.addEventListener('pointerdown', e => {
if (e.pointerType === 'pen' && e.isPrimary) {
enablePenFeatures(); // 启用压感、倾斜、悬停预览
}
});
触控笔适配的 CSS 实践建议
纯 CSS 层面虽不能读取 pressure，但可为笔交互预留视觉空间和行为基础：
- 对
@media (pointer: fine) and (hover: hover)开启pointer-events: auto和精细过渡动画 - 禁用
touch-action: none的全局覆盖，允许笔悬停触发pointerenter - 为笔迹容器设置
will-change: transform提升绘制帧率 - 用
@media (prefers-reduced-motion: reduce)降级动画，避免笔迹拖影
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
