JavaScript检测设备特性应基于真实能力而非UA猜测，核心是用window.matchMedia同步CSS媒体查询、检测触控/指针、devicePixelRatio适配高清屏、监听横竖屏变化，并与CSS协同实现轻量稳健响应。
JavaScript 检测设备特性，核心是读取浏览器环境提供的信息，并结合 CSS 媒体查询能力做动态响应。不靠猜测，而靠真实能力判断——比如是否支持触控、屏幕宽高、像素密度、横竖屏、甚至是否在微信或 iOS Safari 中运行。
用 window.matchMedia 同步 CSS 媒体查询状态
这是最推荐的方式：复用你在 CSS 里写的断点逻辑，避免 JS 和 CSS 断点不一致的问题。
- 监听视口宽度变化：const mql = window.matchMedia("(max-width: 768px)");
- 立即获取当前匹配状态：if (mql.matches) { /* 小屏逻辑 */ }
- 添加实时响应：mql.addEventListener("change", e => { if (e.matches) { /* 进入小屏 */ } });
适用于布局切换、组件折叠/展开、导航菜单收放等典型响应式交互。
检测触控与指针设备能力
别只靠 UA 判断“是不是手机”，而是看它“能不能触控”：
- 'ontouchstart' in window —— 简单粗略（但兼容性好）
- window.matchMedia("(hover: none) and (pointer: coarse)").matches —— 更准确：无悬停 + 粗粒度指针 ≈ 触屏设备
- navigator.maxTouchPoints > 0 —— 部分桌面触屏也支持（如 Windows Surface）
实际用法：触屏启用 swipe 手势，鼠标设备保留 hover 提示；按钮增大点击热区，避免误操作。
识别高 DPR 屏幕并适配图像/Canvas
用 window.devicePixelRatio 判断物理
像素密度：
- 值为 1 → 普通屏；2 或 3 → Retina / 高清屏
- 加载图片时选 @2x 版本：src.replace(/\.([a-z]+)$/, `@${dpr}x.$1`)
- Canvas 绘图前缩放：canvas.width = width * dpr; canvas.height = height * dpr; ctx.scale(dpr, dpr);
监听横竖屏与动态更新 UI
不要只依赖 orientation（已废弃），改用 screen.orientation 或媒体查询：
- 监听方向变化：window.matchMedia("(orientation: landscape)").addEventListener("change", e => { ... })
- 配合 screen.orientation.type 获取当前值（"landscape-primary" 等）
- 注意：iOS Safari 在地址栏显示/隐藏时也会触发 orientation 变化，建议加防抖
适用场景：视频全屏适配、游戏横屏锁定提示、表单字段重排。
基本上就这些——关键不是堆功能，而是按需检测、轻量响应、和 CSS 协同。设备特性会变，但 matchMedia + 能力检测的组合足够稳健。
