JS插件跨端不一致需分四类排查：尺寸判断优先用matchMedia而非window.innerWidth；触摸事件需检查CSS阻断并避免click与touchstart重复绑定；requestAnimationFrame需适配设备帧率差异；网络存储等API须验证真机权限与兼容性。
JS插件在移动端和桌面端行为不一致？先看是否用了 window.innerWidth 或 screen.width
很多插件默认用 window.innerWidth 做响应判断，但在 iOS Safari 中，地址栏收起/展开会触发 resize 事件并改变该值；而 Android Chrome 可能因缩放或 viewport 设置导致计算偏差。实际场景中，screen.width 更稳定（返回设备物理像素宽度），但要注意它不随页面缩放变化，也不反映当前视口尺寸。
建议做法：
- 优先用
matchMedia判断断点，例如matchMedia('(max-width: 768px)')，它不依赖 JS 运行时尺寸，更可靠 - 若必须读宽高，统一用
document.documentElement.clientWidth（CSS 像素，排除滚动条） - 避免在插件初始化时直接写死
window.innerWidth > 768，改用函数封装后延迟执行，防止 DOM 尚未就绪
触摸事件（touchstart/touchmove）没生效？检查是否被 CSS 阻断
桌面端靠 click，移动端得靠 touchstart，但很多插件只绑了前者。更隐蔽的问题是：如果插件容器或父元素设置了 pointer-events: none、touch-action: none，或者有覆盖的透明层，touchstart 根本不会触发。
排查要点：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的「Rendering」面板开启「Paint flashing」，确认触摸区域是否可交互
- 检查插件是否调用了
event.preventDefault()—— 在touchmove中漏掉它会导致页面惯性滚动中断，用户觉得“拖不动” - 不要同时监听
click和touchstart，否则移动端会触发两次；可用'ontouchstart' in window判断环境再绑定
插件依赖 requestAnimationFrame 却卡顿？注意设备刷新率差异
requestAnimationFrame 在桌面端通常是 60fps，但在部分安卓中可能降为 30fps，iOS 某些机型还会因后台标签页节流。插件若假设每帧 16ms 完成计算（60fps 对应值），在低帧率设备上就会堆积任务、掉帧。
实操建议：
- 避免在 rAF 回调里做 DOM 批量操作，改用
DocumentFragment或innerHTML一次性写入 - 对动画类插件，加个帧率检测逻辑：
performance.now()记录前一帧时间，若间隔明显大于 16ms，主动跳过部分逻辑 - 别把 rAF 当定时器用——它不保证准时，仅提示“现在适合绘图”，复杂计算请移出回调
本地调试正常，真机访问白屏或报错？重点查 fetch 和 localStorage 权限
开发时用 file:// 协议打开 HTML，很多插件依赖的 fetch 请求会被浏览器拦截（CORS），localStorage 在某些 iOS 版本的无痕模式下直接不可用，报 SecurityError。这些在桌面 Chrome DevTools 里未必暴露。
必须验证的点：
- 插件是否尝试用
fetch('./config.json')加载配置？真机需走 HTTP(S)，不能用相对路径直读文件 - 是否写了
localStorage.setItem('plugin-cache', ...)却没包try/catch？iOS 无痕模式下会立即 throw - 检查插件是否用了
import()动态导入，而目标设备不支持 ES modules（如旧版 Android WebView）
跨平台不是“写一次就能跑”，而是每一处环境假设都得显式验证。最常被忽略的是：插件内部是否悄悄依赖了 document.fonts.load 这类新 API，或把 Promise.allSettled 当成全局可用 —— 它们在 Safari 12 之前根本不存在。
