移动端JavaScript适配核心是感知设备与响应变化，需正确设置viewport、区分touch/mouse事件、监听旋转缩放、优化性能并适配键盘弹出。
移动端 JavaScript 适配核心不是写多少兼容代码，而是让 JS 行为与视口、设备特性、用户交互节奏保持一致。重点在“感知设备”和“响应变化”，而不是强行抹平差异。
正确设置 viewport 是一切的前提
没有合理的 viewport，JS 获取的屏幕宽高、缩放状态、触摸区域都会失真。必须在 HTML head 中声明：
``注意：不要禁用 user-scalable（除非是 kiosk 类应用），更别用固定 width（如 width=375）。initial-scale=1.0 才能让 window.innerWidth 反映 CSS 像素宽度；否则 JS 读到的可能是视觉视口（visual viewport）或缩放后的值，导致 rem 计算、手势判断出错。
区分 touch 和 mouse 事件，别混用
移动端优先响应 touchstart/touchmove/touchend，PC 端用 mousedown/mousemove/mouseup。两者触发机制、默认行为、事件对象属性都不同：
立即学习“Java免费学习笔记（深入）”；
- touch 事件有 touches、targetTouches、changedTouches，需用 targetTouches[0].clientX 获取坐标；mouse 事件直接用 e.clientX
- touchstart 默认不触发 click，300ms 后才可能触发；可加 `touch-action: manipulation` 或用 fastclick 库消除延迟
- 避免同时监听 touchstart 和 click —— 在 iOS 上会触发两次，安卓部分机型也可能重复
- 需要兼容 PC+移动时，建议统一用 Pointer Events（pointerdown/pointermove），现代浏览器支持良好，且自动归一化输入源
动态适配屏幕旋转与缩放
用户旋转手机、双指缩放页面时，视口尺寸和缩放比例会变，但不会自动重排布局或刷新 JS 变量：
- 监听 `window.orientationchange`（iOS/Safari）或 `resize`（多数安卓浏览器），但注意 resize 在旋转时不一定触发，优先用 orientationchange + 定时检测 innerWidth 变化
- 获取当前缩放比例可用 `window.visualViewport.scale`（Chrome/Edge/Safari 16.4+），比解析 meta 更可靠
- 轮播图、Canvas 绘图、手势拖拽等对尺寸敏感的功能，必须在 resize/orientationchange 后重新计算容器尺寸和坐标映射
性能与交互细节不能忽略
移动端资源有限，JS 卡顿直接影响操作反馈：
- touchmove 频率高（60fps），避免在其中做 DOM 操作或复杂计算；用 `requestAnimationFrame` 节流更新位置
- 避免长任务阻塞主线程，尤其在页面加载初期；可将非关键逻辑用 `setTimeout(fn, 0)` 或 `queueMicrotask` 延后
- 检测是否真机：用 `'ontouchstart' in window` 比 UA 判断更可靠；但注意 Chrome 桌面版开启 device toolbar 也会暴露 touch API，需结合 `navigator.maxTouchPoints > 0`
- 键盘弹起会压缩可视区域（尤其是微信内置浏览器），监听 `focusin` 和 `resize` 配合 setTimeout 延迟检查 `document.documentElement.clientHeight` 变化
不复杂但容易忽略。关键是把 JS 当作“现场协作者”，而不是“静态执行器”。它得知道屏幕多大、用户怎么点、设备正在发生什么变化——然后安静地配合，而不是强行覆盖。
