企业官网建设流程全解析

如何精准识别移动端设备？Zepto.js detect 模块 $.os 与 $.browser 完全指南

【免费下载链接】zeptoZepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API项目地址: https://gitcode.com/gh_mirrors/ze/zepto

📱 想知道用户当前用的是 iPhone 还是 Android 平板、Chrome 还是 Safari？本文带你完整上手Zepto.js 的 detect 模块——它会自动解析 User-Agent，把结果挂到$.os和$.browser两个全局对象上，几行代码即可精准识别移动端设备。

为什么移动端开发需要"设备识别"？

做移动端 Web 时，我们常常要回答这些问题：

• 当前是手机还是平板？（决定加载哪套布局）
• 用户是iOS 还是 Android？（某些 API 行为不同）
• 浏览器是否为WebKit 内核？（决定兼容写法）
• 是否运行在App 的 WebView里？（影响通信方案）

传统做法是手写一长串navigator.userAgent正则，既繁琐又容易漏。Zepto.js 的detect 模块就是为此而生：它在库加载时自动完成全部解析，把结论整理成两个现成对象——src/detect.js 中的$.os（操作系统与设备）与$.browser（浏览器内核）。

💡 小提示：detect 是 Zepto 的可选模块，官方默认构建（zepto event ajax form ie，见 make 第 41 行）不包含它，需要手动加入。

一键启用：如何把 detect 加入构建

detect 模块的源码位于 src/detect.js，构建时只需在MODULES中追加detect即可。

在 Node.js 环境下（构建入口见 package.json 与 make）：

# 安装构建依赖后，自定义构建（按需增减模块） MODULES="zepto event detect" npm run-script dist

Windows 用户则先设置环境变量再执行构建：

SET MODULES=zepto event detect npm run-script dist

构建脚本会自动拼接 src/ 目录下的对应模块，并生成压缩版与 gzip 版本（逻辑见 make）。构建完成后，$.os与$.browser就已就绪，无需任何初始化代码。

$.os 速查表：一眼看懂操作系统与设备类型

$.os是一个扁平对象，识别到的字段才会出现——没有该字段就代表"不是它"。常用字段如下：

其中phone/tablet两个派生字段最有价值：detect 模块综合 UA 中的Mobile、Tablet标记与设备型号，替你算好了"手机还是平板"，规则详见 src/detect.js#L63-L67。

$.browser 速查表：识别浏览器内核与版本

$.browser的结构与$.os完全一致，关注浏览器侧的信息：

字段写入逻辑集中在 src/detect.js#L37-L61，可对照阅读。

3 个实用判断示例（新手可直接照抄）

以下均为真实业务中最常见的三类判断，代码极少，重点在思路：

① 手机还是平板？加载不同布局

if ($.os.tablet) { // 平板端：多栏布局 } else { // 手机端：单栏布局 }

② iOS 用户开启专属能力

if ($.os.ios && $.os.version) { // 可结合版本做降级，如 iOS 7 以下关闭新特性 }

③ 是否在 App 内运行（WebView 通信）

if ($.browser.webview) { // 存在与原生 App 的 JSBridge 通道 }

⚠️ 注意：os.version与browser.version都是字符串，做版本比较前请parseFloat()，否则"9.1" > "8.2"这类比较会出错。

常见误区与注意事项（新手必读）

1. 识别只在加载时执行一次detect 模块在脚本加载时调用一次解析（src/detect.js#L70），结果固定。同一页面内无需、也无法"刷新"识别结果。
2. 别把 UA 当真相User-Agent 可被任意伪造，detect 只做"启发式判断"。涉及安全或计费逻辑时，不要依赖它做唯一判据。
3. 字段"存在与否"即结论代码风格建议写if ($.os.ipad)而不是if ($.os.ipad === true)，未识别的字段是undefined。
4. 现代设备重点关注 ios / android 两大分支webOS、BlackBerry、Windows Phone 等字段是为覆盖 Zepto 支持的老设备生态而保留（完整测试样例见 test/detect.html#L32-L96），新项目里os.ios、os.android、os.phone、os.tablet四个字段已覆盖 99% 的场景。

如何验证识别结果？官方测试页面教你自检

仓库内置了 detect 模块的单元测试页 test/detect.html：

• 内置40+ 条真实设备的 User-Agent 样本（iPhone、iPad、Nexus、Kindle、Windows Phone 等），逐条断言os与browser的识别结果；
• 测试通过$.__detect暴露的函数（src/detect.js#L72）手动注入任意 UA 进行验证，你可以把自家用户的 UA 字符串贴进去复现问题；
• 本地运行方式：npm start启动测试服务器后访问 detect 页面，或npm test跑全量用例（见 test/server.coffee）。

调试时若怀疑某台设备识别异常，把它的完整 UA 丢进这个页面跑一遍，是最快的排查手段。

源码导读：detect 模块的完整结构

想深入定制（例如增加对某新设备的识别），直接对照 src/detect.js#L8-L29 的正则列表新增一条匹配即可——整个模块不到 80 行代码，是学习"UA 解析"的绝佳范本。

小结

只需一步构建（MODULES="zepto event detect"），Zepto.js 的 detect 模块就能让"精准识别移动端设备"从一坨难维护的正则，变成两个一目了然的全局对象。🚀

【免费下载链接】zeptoZepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API项目地址: https://gitcode.com/gh_mirrors/ze/zepto