如何精准识别移动端设备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# 安装构建依赖后自定义构建按需增减模块 MODULESzepto event detect npm run-script distWindows 用户则先设置环境变量再执行构建SET MODULESzepto event detect npm run-script dist构建脚本会自动拼接 src/ 目录下的对应模块并生成压缩版与 gzip 版本逻辑见 make。构建完成后$.os与$.browser就已就绪无需任何初始化代码。$.os 速查表一眼看懂操作系统与设备类型$.os是一个扁平对象识别到的字段才会出现——没有该字段就代表不是它。常用字段如下字段含义典型场景$.os.iosiOS 设备iPhone / iPad / iPod 统一标记判断 iOS 专属 API$.os.iphone/$.os.ipad/$.os.ipod具体设备型号布局差异化$.os.android安卓系统安卓专属处理$.os.wpWindows Phone桌面端兼容判断$.os.webos/$.os.touchpadwebOS 系统及 HP TouchPad老设备兼容$.os.blackberry/$.os.bb10/$.os.rimtabletos黑莓手机 / BB10 / PlayBook 平板黑莓生态支持$.os.kindle亚马逊 Kindle阅读器环境适配$.os.firefoxosFirefox OS系统浏览器识别$.os.version系统版本号字符串按版本降级功能$.os.phone✅ 是手机核心分流条件$.os.tablet✅ 是平板核心分流条件其中phone/tablet两个派生字段最有价值detect 模块综合 UA 中的Mobile、Tablet标记与设备型号替你算好了手机还是平板规则详见 src/detect.js#L63-L67。$.browser 速查表识别浏览器内核与版本$.browser的结构与$.os完全一致关注浏览器侧的信息字段含义说明$.browser.webkit是否 WebKit 内核移动端识别的基石几乎所有现代移动浏览器都会命中$.browser.chromeChrome 内核包含 iOS 上的 Chrome通过CriOS标记识别见 src/detect.js#L24$.browser.safariSafari 浏览器注意Android 上的浏览器不会被标记为 Safari见下文误区$.browser.firefoxFirefox / 火狐移动端—$.browser.ie桌面 IE / Windows Phone 内置浏览器含 IE10 兼容模式版本修正$.browser.webview✅ 运行在 App 的 WebView 中iOS 内嵌网页通信的关键开关$.browser.silk亚马逊 SilkKindle Fire阅读类设备适配$.browser.playbook黑莓 PlayBook—$.browser.version浏览器版本号字符串与os.version区分使用字段写入逻辑集中在 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这类比较会出错。常见误区与注意事项新手必读识别只在加载时执行一次detect 模块在脚本加载时调用一次解析src/detect.js#L70结果固定。同一页面内无需、也无法刷新识别结果。别把 UA 当真相User-Agent 可被任意伪造detect 只做启发式判断。涉及安全或计费逻辑时不要依赖它做唯一判据。字段存在与否即结论代码风格建议写if ($.os.ipad)而不是if ($.os.ipad true)未识别的字段是undefined。现代设备重点关注 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模块本体UA 正则解析L6-L29、字段写入L37-L61、手机/平板派生L63-L67test/detect.html40 真实 UA 的识别回归测试make构建脚本MODULES决定最终包含哪些模块README.md#L92-L95官方模块清单detect 的描述为 Provides$.osand$.browserinformation想深入定制例如增加对某新设备的识别直接对照 src/detect.js#L8-L29 的正则列表新增一条匹配即可——整个模块不到 80 行代码是学习UA 解析的绝佳范本。小结想回答的问题用哪个字段手机还是平板$.os.phone/$.os.tablet哪个操作系统$.os.ios/$.os.android/$.os.wp…哪个浏览器$.browser.chrome/$.browser.safari/$.browser.webkit…是否在 App 里$.browser.webview版本号$.os.version/$.browser.version字符串需 parseFloat只需一步构建MODULESzepto event detectZepto.js 的 detect 模块就能让精准识别移动端设备从一坨难维护的正则变成两个一目了然的全局对象。【免费下载链接】zeptoZepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API项目地址: https://gitcode.com/gh_mirrors/ze/zepto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何精准识别移动端设备？Zepto.js detect 模块 $.os 与 $.browser 完全指南
如何精准识别移动端设备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# 安装构建依赖后自定义构建按需增减模块 MODULESzepto event detect npm run-script distWindows 用户则先设置环境变量再执行构建SET MODULESzepto event detect npm run-script dist构建脚本会自动拼接 src/ 目录下的对应模块并生成压缩版与 gzip 版本逻辑见 make。构建完成后$.os与$.browser就已就绪无需任何初始化代码。$.os 速查表一眼看懂操作系统与设备类型$.os是一个扁平对象识别到的字段才会出现——没有该字段就代表不是它。常用字段如下字段含义典型场景$.os.iosiOS 设备iPhone / iPad / iPod 统一标记判断 iOS 专属 API$.os.iphone/$.os.ipad/$.os.ipod具体设备型号布局差异化$.os.android安卓系统安卓专属处理$.os.wpWindows Phone桌面端兼容判断$.os.webos/$.os.touchpadwebOS 系统及 HP TouchPad老设备兼容$.os.blackberry/$.os.bb10/$.os.rimtabletos黑莓手机 / BB10 / PlayBook 平板黑莓生态支持$.os.kindle亚马逊 Kindle阅读器环境适配$.os.firefoxosFirefox OS系统浏览器识别$.os.version系统版本号字符串按版本降级功能$.os.phone✅ 是手机核心分流条件$.os.tablet✅ 是平板核心分流条件其中phone/tablet两个派生字段最有价值detect 模块综合 UA 中的Mobile、Tablet标记与设备型号替你算好了手机还是平板规则详见 src/detect.js#L63-L67。$.browser 速查表识别浏览器内核与版本$.browser的结构与$.os完全一致关注浏览器侧的信息字段含义说明$.browser.webkit是否 WebKit 内核移动端识别的基石几乎所有现代移动浏览器都会命中$.browser.chromeChrome 内核包含 iOS 上的 Chrome通过CriOS标记识别见 src/detect.js#L24$.browser.safariSafari 浏览器注意Android 上的浏览器不会被标记为 Safari见下文误区$.browser.firefoxFirefox / 火狐移动端—$.browser.ie桌面 IE / Windows Phone 内置浏览器含 IE10 兼容模式版本修正$.browser.webview✅ 运行在 App 的 WebView 中iOS 内嵌网页通信的关键开关$.browser.silk亚马逊 SilkKindle Fire阅读类设备适配$.browser.playbook黑莓 PlayBook—$.browser.version浏览器版本号字符串与os.version区分使用字段写入逻辑集中在 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这类比较会出错。常见误区与注意事项新手必读识别只在加载时执行一次detect 模块在脚本加载时调用一次解析src/detect.js#L70结果固定。同一页面内无需、也无法刷新识别结果。别把 UA 当真相User-Agent 可被任意伪造detect 只做启发式判断。涉及安全或计费逻辑时不要依赖它做唯一判据。字段存在与否即结论代码风格建议写if ($.os.ipad)而不是if ($.os.ipad true)未识别的字段是undefined。现代设备重点关注 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模块本体UA 正则解析L6-L29、字段写入L37-L61、手机/平板派生L63-L67test/detect.html40 真实 UA 的识别回归测试make构建脚本MODULES决定最终包含哪些模块README.md#L92-L95官方模块清单detect 的描述为 Provides$.osand$.browserinformation想深入定制例如增加对某新设备的识别直接对照 src/detect.js#L8-L29 的正则列表新增一条匹配即可——整个模块不到 80 行代码是学习UA 解析的绝佳范本。小结想回答的问题用哪个字段手机还是平板$.os.phone/$.os.tablet哪个操作系统$.os.ios/$.os.android/$.os.wp…哪个浏览器$.browser.chrome/$.browser.safari/$.browser.webkit…是否在 App 里$.browser.webview版本号$.os.version/$.browser.version字符串需 parseFloat只需一步构建MODULESzepto event detectZepto.js 的 detect 模块就能让精准识别移动端设备从一坨难维护的正则变成两个一目了然的全局对象。【免费下载链接】zeptoZepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API项目地址: https://gitcode.com/gh_mirrors/ze/zepto创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考