为什么iPad检测不到smartbanner.js平台检测原理揭秘maxTouchPoints与User Agent的较量【免费下载链接】smartbanner.jsCustomisable and lightweight smart app banner for iOS and Android项目地址: https://gitcode.com/gh_mirrors/smar/smartbanner.js如果你发现smartbanner.js的 Smart App Banner 在 iPhone 上正常显示却在 iPad 上消失了问题大概率出在平台检测环节新版 iPadOS 的 Safari 把 User Agent 伪装成了 Mac传统 UA 判断因此失效而maxTouchPoints正是破解这一难题的关键。smartbanner.js 是一款轻量级约 15.7 KB、无需 jQuery 的可定制 App 引导横幅插件支持 iOS 和 Android 双平台本文带你彻底搞懂它的平台检测原理。一、30秒认识 smartbanner.js smartbanner.js 的核心卖点是只加 meta 标签就能用——开发者只需在 HTML 中声明标题、图标、商店跳转地址等 meta 标签再引入编译后的脚本页面加载完成后横幅就会自动出现。整个项目的源码结构非常小巧核心文件包括src/detector.js平台检测器本文主角src/optionparser.js解析 meta 标签为配置项src/smartbanner.js横幅主体逻辑HTML 生成、事件、显示/隐藏src/bakery.js用 Cookie 记忆用户已关闭状态src/index.js入口页面load后自动发布横幅所有平台相关的行为都始于Detector.platform()这一行调用见src/smartbanner.js构造函数第 86 行。二、iPad 检测不到的根本原因User Agent 突然变了脸 老版本的 iPad Safari其 User Agent 里老老实实写着iPad; CPU OS 9_3_2 like Mac OS X正则/iPhone|iPad|iPod/一抓一个准。但从iPadOS 13对应 iOS 13开始Apple 让 iPad 上的 Safari 在桌面级场景下把 UA 报告为Macintosh; Intel Mac OS X 10_15_6——和一台 Mac 电脑的 Safari几乎无法区分。于是/iPhone|iPad|iPod/i.test(userAgent)→ ❌ 匹配失败设备看起来像一台 Mac → 横幅不显示项目的测试用例里就特意保留了这个伪装现场test/spec/detector_spec.js第 14 行Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) ... Version/14.1 Safari/605.1.15这就是为什么 iPad 检测不到的答案不是检测代码坏了而是 User Agent 在 iPad 上不再诚实。三、detector.js 检测流程逐行拆解 真正的检测逻辑全部在src/detector.js的platform()方法中第 3–14 行流程只有三步非常克制第 1 步读取两个信号源let maxTouchPoints window.navigator.maxTouchPoints; let userAgent window.navigator.userAgent;第 2 步Android 优先判断if (/Android/i.test(userAgent)){ return android; }Android 设备的 UA 里稳定包含Android字样一步到位无需二次确认。第 3 步iOS 双重保险第 11 行全项目最关键的一行} else if ((!window.MSStream !/X11|Linux|Windows/i.test(userAgent) maxTouchPoints maxTouchPoints 0) || /iPhone|iPad|iPod/i.test(userAgent)) { return ios; }两个条件满足其一即判定为 iOS下面分开看。条件 AmaxTouchPoints 指纹识别新 iPad 的主力四个子条件必须同时成立子条件作用!window.MSStream排除老版 Internet ExplorerIE 也有 maxTouchPoints 概念!/X11\|Linux\|Windows/i排除桌面 LinuxX11和 Windows 触屏电脑maxTouchPoints 0有触摸屏 大概率是 iOS 移动设备逻辑很直白一台自称 Mac 却有触控点的设备只可能是 iPad。源码注释第 9–10 行也直言不讳maxTouchPoints is the only effective method to detect iPad iOS 13maxTouchPoints 是检测 iOS 13 iPad 的唯一有效方法条件 B传统 User Agent 正则老设备的兜底/iPhone|iPad|iPod/i负责抓住所有 UA 里还写着iPhone、iPad、iPod的旧版本 iOS 设备以及 iOS 13 之前的 iPad。兜底返回 undefined两个条件都不满足比如 Linux 桌面浏览器platform()返回undefined后续横幅自然不会出现——这是一个优雅的静默放弃。四、maxTouchPoints识别 iPadOS 13 的唯一钥匙 ️maxTouchPoints是浏览器 APIwindow.navigator.maxTouchPoints返回的数值表示设备支持的最大同时触控点数iPhone / iPad 等触屏设备 → 大于 0Mac 桌面 Safari → 0Windows 触屏电脑 → 也可能大于 0所以要靠 UA 排除Windows字样项目团队在测试中完整复现了这个场景test/spec/detector_spec.js第 127–151 行 when on iPad iOS 13 or newer模拟一个Mac 伪装 UA maxTouchPoints 1的环境断言结果必须返回ios。这个用例是整套检测方案正确性的试金石。记忆口诀UA 负责报户口maxTouchPoints 负责验指纹——新 iPad 谎报了户口但指纹骗不了人。五、检测结果如何驱动 Banner 显示 ⚙️platform()的返回值ios/android/undefined会像开关一样影响多处行为src/smartbanner.js应用图标iOS 取iconAppleAndroid 取iconGoogleget icon第 121–127 行跳转地址iOS 跳 App StoreAndroid 跳 Google Playget buttonUrl第 129–136 行价格后缀与按钮文案按平台取对应 meta 标签的值样式修饰符横幅包裹层会自动加上smartbanner--ios或smartbanner--android类名此外还有两道人工闸门均可通过 meta 标签配置enabled-platforms最低优先级直接声明横幅启用的平台列表undefined平台自动出局exclude-user-agent-regex最高优先级黑名单例如你的 App 只支持 iPhone 不支持 iPad就把 iPad 的 UA 正则排除掉include-user-agent-regex白名单可覆盖平台判断强行放行判断优先级为排除正则 包含正则 / 平台开关详见src/smartbanner.js的publish()方法第 212–241 行。六、iPad 上 Banner 不显示三步排查法 ️按顺序执行90% 的检测不到问题都能定位第 1 步打开 iPad Safari 的 Web 检查器或远程调试查看两个值window.navigator.maxTouchPoints // 应 0 window.navigator.userAgent // 观察是否已变身 Mac若 maxTouchPoints 为 0 或 undefined说明运行环境不支持该 API需回退到条件 B。第 2 步检查 meta 配置确认smartbanner:enabled-platforms没有把 ios 排除且smartbanner:exclude-user-agent-regex没有误伤 iPad 的 Mac 伪装 UA例如写了Macintosh之类的宽泛模式。第 3 步确认不是被关闭过smartbanner.js 关闭横幅后会写入smartbanner_exited1的 Cookiesrc/bakery.js第 9–11 行在 Cookie 未过期前横幅不会重新出现——这不是检测问题先清一下 Cookie 再验证。七、总结一场真假 Mac的较量 ⚖️场景User Agent 表现生效的检测条件结果Android 手机含AndroidUA 正则✅androidiPhone / 旧版 iPad含iPhone/iPad/iPodUA 正则✅iosiPadOS 13 iPad伪装MacintoshmaxTouchPoints 0✅iosMac / Windows / Linux 桌面无 iOS 特征无触控无⛔undefinedsmartbanner.js 用不足 15 行的platform()方法就化解了 iPad UA 伪装带来的检测难题User Agent 负责广度maxTouchPoints 负责深度两者互补才构成完整的 iOS 检测闭环。下次再遇到某设备检测不到不妨先看看它的 UA 说了什么、又隐瞒了什么。【免费下载链接】smartbanner.jsCustomisable and lightweight smart app banner for iOS and Android项目地址: https://gitcode.com/gh_mirrors/smar/smartbanner.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考